From 305c274dd0ae6f925df26c361d8f8607f4b959e7 Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Wed, 26 Jun 2024 09:23:57 -0500
Subject: [PATCH] fix(combobox): memoize floating ui ref to prevent max call
 depth (#16866)

Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
---
 .../src/components/ComboBox/ComboBox.tsx      | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index 3fa05acf5ae3..9fdf344dd3e5 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -13,6 +13,7 @@ import React, {
   useEffect,
   useState,
   useRef,
+  useMemo,
   forwardRef,
   type ReactNode,
   type ComponentType,
@@ -655,6 +656,15 @@ const ComboBox = forwardRef(
       (helperText && !isFluid && helperTextId) ||
       undefined;
 
+    const menuProps = useMemo(
+      () =>
+        getMenuProps({
+          'aria-label': deprecatedAriaLabel || ariaLabel,
+          ref: autoAlign ? refs.setFloating : null,
+        }),
+      [autoAlign, deprecatedAriaLabel, ariaLabel]
+    );
+
     return (
       <div className={wrapperClasses}>
         {titleText && (
@@ -674,7 +684,7 @@ const ComboBox = forwardRef(
           light={light}
           size={size}
           warn={warn}
-          ref={refs.setReference}
+          ref={autoAlign ? refs.setReference : null}
           warnText={warnText}
           warnTextId={warnTextId}>
           <div className={`${prefix}--list-box__field`}>
@@ -686,7 +696,7 @@ const ComboBox = forwardRef(
               aria-haspopup="listbox"
               title={textInput?.current?.value}
               {...getInputProps({
-                'aria-controls': isOpen ? undefined : getMenuProps().id,
+                'aria-controls': isOpen ? undefined : menuProps.id,
                 placeholder,
                 ref: { ...mergeRefs(textInput, ref) },
                 onKeyDown: (
@@ -785,11 +795,7 @@ const ComboBox = forwardRef(
             />
           </div>
           {normalizedSlug}
-          <ListBox.Menu
-            {...getMenuProps({
-              'aria-label': deprecatedAriaLabel || ariaLabel,
-            })}
-            ref={mergeRefs(getMenuProps().ref, refs.setFloating)}>
+          <ListBox.Menu {...menuProps}>
             {isOpen
               ? filterItems(items, itemToString, inputValue).map(
                   (item, index) => {