fix(components): Fix autocomplete crashing on resize larger [JOB-151844]

packages/components/src/Autocomplete/Autocomplete.rebuilt.tsx

@@ -101,9 +101,6 @@ function AutocompleteRebuiltInternal<
     duration: { open: tokens["timing-base"], close: tokens["timing-base"] },
   });
 
-  const [menuWidth, setMenuWidth] = React.useState<number | undefined>(
-    undefined,
-  );
   const [positionRefEl, setPositionRefEl] = React.useState<Element | null>(
     null,
   );
@@ -197,7 +194,6 @@ function AutocompleteRebuiltInternal<
       );
 
       if (multiContainer) {
-        setMenuWidth(multiContainer.clientWidth);
         setPositionRefEl(multiContainer);
       }
     },
@@ -209,14 +205,14 @@ function AutocompleteRebuiltInternal<
       setReferenceElement(node);
 
       if (!props.multiple) {
-        // Workaround to get the width of the visual InputText element, which is not the same as
-        // the literal input reference element.
+        // Workaround to get the visual InputText element, which is not the same
+        // as the literal input reference element when props like suffix/prefix
+        // are present. Used to set the position reference for the floating menu.
         const visualInputTextElement = node?.closest(
           "[data-testid='Form-Field-Wrapper']",
         );
 
         if (visualInputTextElement) {
-          setMenuWidth(visualInputTextElement.clientWidth);
           setPositionRefEl(visualInputTextElement);
         }
       }
@@ -252,7 +248,6 @@ function AutocompleteRebuiltInternal<
       className={menuClassName}
       floatingStyles={floatingStyles}
       transitionStyles={transitionStyles}
-      menuWidth={menuWidth}
       menuStyle={props.UNSAFE_styles?.menu}
       renderable={renderable}
       persistentsHeaders={persistentsHeaders}

packages/components/src/Autocomplete/components/FloatingMenu.tsx

@@ -27,7 +27,6 @@ interface FloatingMenuProps<Value extends OptionLike> {
   readonly className: string;
   readonly floatingStyles: React.CSSProperties;
   readonly transitionStyles: React.CSSProperties;
-  readonly menuWidth?: number;
   readonly menuStyle?: React.CSSProperties;
 
   readonly renderable: Array<RenderItem<Value>>;
@@ -89,7 +88,6 @@ export function FloatingMenu<Value extends OptionLike>({
   className,
   floatingStyles,
   transitionStyles,
-  menuWidth,
   menuStyle,
   renderable,
   persistentsHeaders,
@@ -139,7 +137,6 @@ export function FloatingMenu<Value extends OptionLike>({
               ...floatingStyles,
               ...transitionStyles,
               ...menuStyle,
-              ...(menuWidth ? { width: menuWidth, maxWidth: menuWidth } : {}),
             },
           })}
         >

packages/components/src/Autocomplete/hooks/useAutocompleteListNav.ts

@@ -50,6 +50,18 @@ export interface UseAutocompleteListNavProps {
   outsidePressExcludeSelector?: string;
 }
 
+function useStableSetReference(
+  refs: UseFloatingReturn["refs"],
+): (el: HTMLElement | null) => void {
+  const latestRefs = useRef(refs);
+  latestRefs.current = refs;
+
+  return useCallback(
+    (el: HTMLElement | null) => latestRefs.current.setReference(el),
+    [],
+  );
+}
+
 export function useAutocompleteListNav({
   navigableCount,
   shouldResetActiveIndexOnClose,
@@ -84,12 +96,13 @@ export function useAutocompleteListNav({
       offset(MENU_OFFSET),
       flip({ fallbackPlacements: ["top"] }),
       size({
-        apply({ availableHeight, elements }) {
+        apply({ availableHeight, rects, elements }) {
           const maxHeight = calculateMaxHeight(availableHeight, {
             maxHeight: AUTOCOMPLETE_MAX_HEIGHT,
           });
           Object.assign(elements.floating.style, {
             maxHeight: `${maxHeight}px`,
+            width: `${rects.reference.width}px`,
           });
         },
       }),
@@ -154,10 +167,7 @@ export function useAutocompleteListNav({
     });
   }, [navigableCount, setActiveIndex, listRef]);
 
-  const setReferenceElement = useCallback(
-    (el: HTMLElement | null) => refs.setReference(el),
-    [refs],
-  );
+  const setReferenceElement = useStableSetReference(refs);
 
   return {
     refs,

packages/components/src/InputText/InputText.rebuilt.tsx

@@ -1,5 +1,5 @@
 import type { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
-import React, { forwardRef, useId } from "react";
+import React, { forwardRef, useId, useMemo } from "react";
 import type { InputTextRebuiltProps } from "./InputText.types";
 import { useTextAreaResize } from "./useTextAreaResize";
 import { useInputTextActions } from "./useInputTextActions";
@@ -64,6 +64,8 @@ export const InputTextSPAR = forwardRef(function InputTextInternal(
   const isInvalid = Boolean(props.error || props.invalid);
   const dataAttrs = filterDataAttributes(props);
 
+  const mergedRef = useMemo(() => mergeRefs([inputRef, inputTextRef]), []);
+
   // Shared props for both TextArea and TextInput
   const commonInputProps = {
     id,
@@ -98,7 +100,7 @@ export const InputTextSPAR = forwardRef(function InputTextInternal(
     onPointerDown: handlePointerDown,
     onPointerUp: handlePointerUp,
     onClick: handleClick,
-    ref: mergeRefs([inputRef, inputTextRef]),
+    ref: mergedRef,
     ...dataAttrs,
   };