ToolbarButtonRow: prevent closure of overflow menu when interacting with portal elements (#68319)

* don't close the overflow menu when interacting with something in a portal

* keep overflow ref logic
This commit is contained in:
Ashley Harrison 2023-05-15 13:48:19 +01:00 committed by GitHub
parent 7e3c68d3c1
commit 5d91ace745
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -7,6 +7,7 @@ import React, { forwardRef, HTMLAttributes, useState, useRef, useLayoutEffect, c
import { GrafanaTheme2 } from '@grafana/data';
import { useTheme2 } from '../../themes';
import { getPortalContainer } from '../Portal/Portal';
import { ToolbarButton } from './ToolbarButton';
export interface Props extends HTMLAttributes<HTMLDivElement> {
@ -29,7 +30,10 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
onClose: () => setShowOverflowItems(false),
isDismissable: true,
isOpen: showOverflowItems,
shouldCloseOnInteractOutside: (element: Element) => !overflowRef.current?.contains(element),
shouldCloseOnInteractOutside: (element: Element) => {
const portalContainer = getPortalContainer();
return !overflowRef.current?.contains(element) && !portalContainer.contains(element);
},
},
overflowItemsRef
);