fix(dropdown): memoize floating ui ref to prevent max call depth (car…

…bon-design-system#17002) Signed-off-by: Edward Rojas <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
2nikhiltom · Jul 22, 2024 · 153a137 · 153a137
1 parent c057ce2
commit 153a137
Showing 1 changed file with 10 additions and 4 deletions.
diff --git 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';