From 96c754266d44811646bfa3fc82ced73a33df85fc Mon Sep 17 00:00:00 2001
From: takhila499 <119969297+takhila499@users.noreply.github.com>
Date: Thu, 14 Dec 2023 13:31:04 -0500
Subject: [PATCH] (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
---
 ...FixAccessibilityMenu_2023-12-14-16-45.json | 10 ++++++
 packages/menu/src/Menu/Menu.jsx               | 34 ++++++++++++-------
 2 files changed, 31 insertions(+), 13 deletions(-)
 create mode 100644 common/changes/pcln-menu/chore-AIR-59161-FixAccessibilityMenu_2023-12-14-16-45.json

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
new file mode 100644
index 0000000000..ed845064db
--- /dev/null
+++ 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"
+}
\ No newline at end of file
diff --git a/packages/menu/src/Menu/Menu.jsx b/packages/menu/src/Menu/Menu.jsx
index dd7af8ae2e..a8632dbb17 100644
--- 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 = {