(AIR-59161):fix for loosing focus of menu after selecting menuitem (#…

…1428) * (AIR-59161):fix for loosing focus of menu after selecting menuitem * (AIR-59161):changelog * (AIR-59161):changelog type change from patch to minor
priceline · Dec 14, 2023 · 96c7542 · 96c7542
1 parent e5595b5
commit 96c7542
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/common/changes/pcln-menu/chore-AIR-59161-FixAccessibilityMenu_2023-12-14-16-45.json b/common/changes/pcln-menu/chore-AIR-59161-FixAccessibilityMenu_2023-12-14-16-45.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-menu",
+      "comment": "Adding querySelectorPortal prop to menu item to fix the focus issue.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-menu"
+}
diff --git a/packages/menu/src/Menu/Menu.jsx b/packages/menu/src/Menu/Menu.jsx
@@ -17,6 +17,7 @@ function Menu({
   trapFocus,
   placement,
   children,
+  querySelectorPortal,
   ...props
 }) {
   const MenuContent = ({ handleClose }) => (
@@ -57,19 +58,25 @@ function Menu({
   )
 
   return (
-    <Popover
-      aria-controls={id}
-      hideArrow
-      idx={id}
-      placement={placement ?? 'bottom-start'}
-      renderContent={MenuContent}
-      trapFocus={trapFocus}
-      width={width}
-      zIndex={1600}
-      {...props}
-    >
-      <ClickableNode />
-    </Popover>
+    <>
+      <Popover
+        aria-controls={id}
+        hideArrow
+        idx={id}
+        placement={placement ?? 'bottom-start'}
+        renderContent={MenuContent}
+        trapFocus={trapFocus}
+        width={width}
+        zIndex={1600}
+        querySelectorPortal={`.${querySelectorPortal}`}
+        {...props}
+      >
+        <ClickableNode />
+      </Popover>
+      {querySelectorPortal ? (
+        <div style={{ width: 0, display: 'inline-block' }} className={querySelectorPortal} />
+      ) : null}
+    </>
   )
 }
 
@@ -87,6 +94,7 @@ Menu.propTypes = {
   trapFocus: PropTypes.bool,
   placement: PropTypes.string,
   children: PropTypes.node,
+  querySelectorPortal: PropTypes.string,
 }
 
 Menu.defaultProps = {