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
pull/68467/head
Ashley Harrison 2 years ago committed by GitHub
parent 7e3c68d3c1
commit 5d91ace745
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 6
      packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx

@ -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
);

Loading…
Cancel
Save