TPP-879 fix issue where tooltip crashes global bar (#328)

Author: KitoC

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

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

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.33",
+  "version": "3.2.34",
   "engines": {
     "node": "20.12.2"
   },