diff --git a/lib/components/Popover/index.js b/lib/components/Popover/index.js index 5d57fcb9..901bb365 100644 --- a/lib/components/Popover/index.js +++ b/lib/components/Popover/index.js @@ -21,7 +21,8 @@ import { PropTypes } from "prop-types"; import Box from "../Box"; import { getFloatingUiRootElement, - getFloatingUiZIndex + getFloatingUiZIndex, + isRenderedInReactSelectMenu } from "../../utils/floatingUiHelpers"; const DIRECTIONS_MAP = { @@ -359,6 +360,7 @@ export default function Popover({ {text} ); + const containsLinks = refs.floating?.current?.querySelectorAll("a").length; return ( @@ -368,9 +370,19 @@ export default function Popover({ root={getFloatingUiRootElement(context.refs.reference)} preserveTabOrder={true} > - - {Popover} - + {containsLinks ? ( + + {Popover} + + ) : ( + Popover + )} ) : ( Popover diff --git a/lib/utils/floatingUiHelpers.js b/lib/utils/floatingUiHelpers.js index 5cb053b0..5488bf16 100644 --- a/lib/utils/floatingUiHelpers.js +++ b/lib/utils/floatingUiHelpers.js @@ -12,6 +12,11 @@ const getFloatingUiZIndex = (triggerRef) => { return 900; }; +const REACT_SELECT_MENU = "react-select-menu"; + +const isRenderedInReactSelectMenu = (triggerRef) => + document.getElementById(REACT_SELECT_MENU)?.contains?.(triggerRef.current); + const getFloatingUiRootElement = (triggerRef) => { const activeModalRef = document.getElementById("modal-overlay"); @@ -21,7 +26,15 @@ const getFloatingUiRootElement = (triggerRef) => { return document.getElementById("modal"); } + if (isRenderedInReactSelectMenu(triggerRef)) { + return document.getElementById(REACT_SELECT_MENU).firstChild; + } + return undefined; }; -export { getFloatingUiZIndex, getFloatingUiRootElement }; +export { + getFloatingUiZIndex, + getFloatingUiRootElement, + isRenderedInReactSelectMenu +};