mirror of
https://github.com/apache/superset.git
synced 2026-05-22 00:05:15 +00:00
fix(react18): forwardRef Popover wrapper, wrap explore popover trigger children in span
- Popover (superset-ui-core): forward refs to antd Popover so consumers that pass it as a trigger child can attach a DOM ref without triggering findDOMNode. - Explore popover triggers (ColorBreakpoint, Contour, DndColumnSelect, AdhocFilter): the popover children are arbitrary user nodes which are often function components without forwardRef. Wrapping them in a span gives antd's resize observer a real DOM ref to attach, eliminating the React 18 deprecation warning.
This commit is contained in:
@@ -16,11 +16,14 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { Popover as AntdPopover } from 'antd';
|
||||
import { forwardRef } from 'react';
|
||||
import { Popover as AntdPopover, type TooltipRef } from 'antd';
|
||||
import { PopoverProps as AntdPopoverProps } from 'antd/es/popover';
|
||||
|
||||
export interface PopoverProps extends AntdPopoverProps {
|
||||
forceRender?: boolean;
|
||||
}
|
||||
|
||||
export const Popover = (props: PopoverProps) => <AntdPopover {...props} />;
|
||||
export const Popover = forwardRef<TooltipRef, PopoverProps>((props, ref) => (
|
||||
<AntdPopover ref={ref} {...props} />
|
||||
));
|
||||
|
||||
@@ -54,7 +54,9 @@ const ColorBreakpointsPopoverTrigger = ({
|
||||
onOpenChange={setVisibility}
|
||||
destroyOnHidden
|
||||
>
|
||||
{props.children}
|
||||
{/* Wrap in span so the Popover can attach a ref without relying
|
||||
on findDOMNode (deprecated in React 18+). */}
|
||||
<span>{props.children}</span>
|
||||
</ControlPopover>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -52,7 +52,9 @@ const ContourPopoverTrigger = ({
|
||||
onOpenChange={setVisibility}
|
||||
destroyOnHidden
|
||||
>
|
||||
{props.children}
|
||||
{/* Wrap in span so the Popover can attach a ref without relying
|
||||
on findDOMNode (deprecated in React 18+). */}
|
||||
<span>{props.children}</span>
|
||||
</ControlPopover>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -201,7 +201,9 @@ const ColumnSelectPopoverTriggerInner = ({
|
||||
title={popoverTitle}
|
||||
destroyOnHidden
|
||||
>
|
||||
{children}
|
||||
{/* Wrap in span so the Popover can attach a ref without relying
|
||||
on findDOMNode (deprecated in React 18+). */}
|
||||
<span>{children}</span>
|
||||
</ControlPopover>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -112,7 +112,9 @@ class AdhocFilterPopoverTrigger extends PureComponent<
|
||||
onOpenChange={togglePopover}
|
||||
destroyOnHidden
|
||||
>
|
||||
{this.props.children}
|
||||
{/* Wrap in span so the Popover can attach a ref without relying
|
||||
on findDOMNode (deprecated in React 18+). */}
|
||||
<span>{this.props.children}</span>
|
||||
</ControlPopover>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user