detect if tooltip rendered in react-select menu and change props base…

…d on that
orchestrated-io · Aug 20, 2024 · e711c06 · e711c06
1 parent 701e83b
commit e711c06
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git 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}
     </StyledPopover>
   );
+  const containsLinks = refs.floating?.current?.querySelectorAll("a").length;
 
   return (
     <Box {...props} aria-describedby={context.floatingId}>
@@ -368,9 +370,19 @@ export default function Popover({
             root={getFloatingUiRootElement(context.refs.reference)}
             preserveTabOrder={true}
           >
-            <FloatingFocusManager context={context} modal={false}>
-              {Popover}
-            </FloatingFocusManager>
+            {containsLinks ? (
+              <FloatingFocusManager
+                context={context}
+                modal={false}
+                initialFocus={
+                  isRenderedInReactSelectMenu(context.refs.reference) && -1
+                }
+              >
+                {Popover}
+              </FloatingFocusManager>
+            ) : (
+              Popover
+            )}
           </FloatingPortal>
         ) : (
           Popover

diff --git 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
+};