From 040ed1fd4b56d694e6b48f6e20600c97929daa3f Mon Sep 17 00:00:00 2001
From: EAlexRojas <edward.rojas@fr.ibm.com>
Date: Fri, 19 Jul 2024 14:26:47 +0200
Subject: [PATCH] fix(dropdown): memoize floating ui ref to prevent max call
 depth

Signed-off-by: Edward Rojas <edward.rojas@fr.ibm.com>
---
 .../react/src/components/Dropdown/Dropdown.tsx     | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 172db2034886..848075bf1f2e 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -14,6 +14,7 @@ import React, {
   MouseEvent,
   ReactNode,
   useEffect,
+  useMemo,
 } from 'react';
 import {
   useSelect,
@@ -497,8 +498,13 @@ const Dropdown = React.forwardRef(
           },
         };
 
-    const menuProps = getMenuProps();
-    const menuRef = mergeRefs(menuProps.ref, refs.setFloating);
+    const menuProps = useMemo(
+      () =>
+        getMenuProps({
+          ref: autoAlign ? refs.setFloating : null,
+        }),
+      [autoAlign]
+    );
 
     // Slug is always size `mini`
     let normalizedSlug;
@@ -527,7 +533,7 @@ const Dropdown = React.forwardRef(
           warnText={warnText}
           light={light}
           isOpen={isOpen}
-          ref={refs.setReference}
+          ref={autoAlign ? refs.setReference : null}
           id={id}>
           {invalid && (
             <WarningFilled className={`${prefix}--list-box__invalid-icon`} />
@@ -567,7 +573,7 @@ const Dropdown = React.forwardRef(
             />
           </button>
           {normalizedSlug}
-          <ListBox.Menu {...menuProps} ref={menuRef}>
+          <ListBox.Menu {...menuProps}>
             {isOpen &&
               items.map((item, index) => {
                 const isObject = item !== null && typeof item === 'object';