Skip to content

Commit 368815a

Browse files
authored
fix(OverflowPopover): make OverflowPopoverContext to a single to issue on multiple instances (#5739)
Fixes #5738
1 parent df5da3b commit 368815a

File tree

4 files changed

+24
-11
lines changed

4 files changed

+24
-11
lines changed

packages/main/src/components/OverflowToolbarButton/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
'use client';
22

33
import type { ReactNode } from 'react';
4-
import React, { forwardRef, useContext } from 'react';
5-
import { OverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
4+
import React, { forwardRef } from 'react';
5+
import { useOverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
66
import type { ButtonDomRef, ButtonPropTypes } from '../../webComponents/index.js';
77
import { Button } from '../../webComponents/index.js';
88

@@ -28,7 +28,7 @@ export interface OverflowToolbarButtonPropTypes extends Omit<ButtonPropTypes, 'c
2828
*/
2929
const OverflowToolbarButton = forwardRef<ButtonDomRef, OverflowToolbarButtonPropTypes>((props, ref) => {
3030
const { children, ...rest } = props;
31-
const { inPopover } = useContext(OverflowPopoverContext);
31+
const { inPopover } = useOverflowPopoverContext();
3232

3333
return (
3434
<Button {...rest} ref={ref}>

packages/main/src/components/OverflowToolbarToggleButton/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
'use client';
22

33
import type { ReactNode } from 'react';
4-
import React, { forwardRef, useContext } from 'react';
5-
import { OverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
4+
import React, { forwardRef } from 'react';
5+
import { useOverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
66
import type { ToggleButtonDomRef, ToggleButtonPropTypes } from '../../webComponents/index.js';
77
import { ToggleButton } from '../../webComponents/index.js';
88

@@ -29,7 +29,7 @@ export interface OverflowToolbarToggleButtonPropTypes extends Omit<ToggleButtonP
2929
const OverflowToolbarToggleButton = forwardRef<ToggleButtonDomRef, OverflowToolbarToggleButtonPropTypes>(
3030
(props, ref) => {
3131
const { children, ...rest } = props;
32-
const { inPopover } = useContext(OverflowPopoverContext);
32+
const { inPopover } = useOverflowPopoverContext();
3333

3434
return (
3535
<ToggleButton {...rest} ref={ref}>

packages/main/src/components/Toolbar/OverflowPopover.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { Dispatch, FC, ReactElement, ReactNode, Ref, SetStateAction } from
55
import React, { cloneElement, useEffect, useRef, useState } from 'react';
66
import { createPortal } from 'react-dom';
77
import { ButtonDesign, PopoverPlacementType, PopupAccessibleRole } from '../../enums/index.js';
8-
import { OverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
8+
import { getOverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
99
import { useCanRenderPortal } from '../../internal/ssr.js';
1010
import { stopPropagation } from '../../internal/stopPropagation.js';
1111
import { getUi5TagWithSuffix } from '../../internal/utils.js';
@@ -116,8 +116,10 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
116116
return a11yConfig?.overflowPopover?.role;
117117
})();
118118

119+
const OverflowPopoverContextProvider = getOverflowPopoverContext().Provider;
120+
119121
return (
120-
<OverflowPopoverContext.Provider value={{ inPopover: true }}>
122+
<OverflowPopoverContextProvider value={{ inPopover: true }}>
121123
{overflowButton ? (
122124
cloneElement(overflowButton, { onClick: clonedOverflowButtonClick })
123125
) : (
@@ -177,6 +179,6 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
177179
</Popover>,
178180
portalContainer ?? document.body
179181
)}
180-
</OverflowPopoverContext.Provider>
182+
</OverflowPopoverContextProvider>
181183
);
182184
};
Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
1-
import { createContext } from 'react';
1+
import { createContext, useContext } from 'react';
2+
3+
const SYMBOL = Symbol.for('@ui5/webcomponents-react/OverflowPopoverContext');
24

35
interface IOverflowPopoverContext {
46
inPopover: boolean;
57
}
68

7-
export const OverflowPopoverContext = createContext<IOverflowPopoverContext>({ inPopover: false });
9+
const OverflowPopoverContext = createContext<IOverflowPopoverContext>({ inPopover: false });
10+
11+
export function getOverflowPopoverContext(): typeof OverflowPopoverContext {
12+
globalThis[SYMBOL] ??= OverflowPopoverContext;
13+
return globalThis[SYMBOL];
14+
}
15+
16+
export function useOverflowPopoverContext() {
17+
return useContext(getOverflowPopoverContext());
18+
}

0 commit comments

Comments
 (0)