From ea9390a94c386298b92598c8e8729ce6fe4ec20a Mon Sep 17 00:00:00 2001
From: Ira Nana <ira.nana@aotal.com>
Date: Thu, 2 Oct 2025 10:18:18 +1300
Subject: [PATCH] fix: add and check menuRef to allow interacting with custom
 elements on touch devices (#6071)

---
 packages/react-select/src/Select.tsx          | 11 ++++++++++-
 packages/react-select/src/components/Menu.tsx |  3 ++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 146d084e20..4cae4eaf2e 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -671,6 +671,10 @@ export default class Select<
   getFocusedOptionRef: RefCallback<HTMLDivElement> = (ref) => {
     this.focusedOptionRef = ref;
   };
+  menuRef: HTMLDivElement | null = null;
+  getMenuRef: RefCallback<HTMLDivElement> = (ref) => {
+    this.menuRef = ref;
+  };
   menuListRef: HTMLDivElement | null = null;
   getMenuListRef: RefCallback<HTMLDivElement> = (ref) => {
     this.menuListRef = ref;
@@ -1463,6 +1467,8 @@ export default class Select<
     if (
       this.controlRef &&
       !this.controlRef.contains(event.target as Node) &&
+      this.menuRef &&
+      !this.menuRef.contains(event.target as Node) &&
       this.menuListRef &&
       !this.menuListRef.contains(event.target as Node)
     ) {
@@ -2076,7 +2082,10 @@ export default class Select<
           <Menu
             {...commonProps}
             {...menuPlacementProps}
-            innerRef={ref}
+            innerRef={(instance) => {
+              ref.current = instance;
+              this.getMenuRef(instance);
+            }}
             innerProps={{
               onMouseDown: this.onMenuMouseDown,
               onMouseMove: this.onMenuMouseMove,
diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index 46c310774b..368dda4d49 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -2,6 +2,7 @@
 import {
   createContext,
   JSX,
+  MutableRefObject,
   ReactElement,
   ReactNode,
   Ref,
@@ -255,7 +256,7 @@ interface PlacerProps {
 }
 
 interface ChildrenProps {
-  ref: Ref<HTMLDivElement>;
+  ref: MutableRefObject<HTMLDivElement | null>;
   placerProps: PlacerProps;
 }