diff --git a/packages/components/src/Autocomplete/Autocomplete.rebuilt.tsx b/packages/components/src/Autocomplete/Autocomplete.rebuilt.tsx index 926cda9c3f..37084d845b 100644 --- a/packages/components/src/Autocomplete/Autocomplete.rebuilt.tsx +++ b/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( - undefined, - ); const [positionRefEl, setPositionRefEl] = React.useState( 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} diff --git a/packages/components/src/Autocomplete/components/FloatingMenu.tsx b/packages/components/src/Autocomplete/components/FloatingMenu.tsx index c17b3e461e..8fd8f96eb5 100644 --- a/packages/components/src/Autocomplete/components/FloatingMenu.tsx +++ b/packages/components/src/Autocomplete/components/FloatingMenu.tsx @@ -27,7 +27,6 @@ interface FloatingMenuProps { readonly className: string; readonly floatingStyles: React.CSSProperties; readonly transitionStyles: React.CSSProperties; - readonly menuWidth?: number; readonly menuStyle?: React.CSSProperties; readonly renderable: Array>; @@ -89,7 +88,6 @@ export function FloatingMenu({ className, floatingStyles, transitionStyles, - menuWidth, menuStyle, renderable, persistentsHeaders, @@ -139,7 +137,6 @@ export function FloatingMenu({ ...floatingStyles, ...transitionStyles, ...menuStyle, - ...(menuWidth ? { width: menuWidth, maxWidth: menuWidth } : {}), }, })} > diff --git a/packages/components/src/Autocomplete/hooks/useAutocompleteListNav.ts b/packages/components/src/Autocomplete/hooks/useAutocompleteListNav.ts index 0d5683fbf5..0720dace54 100644 --- a/packages/components/src/Autocomplete/hooks/useAutocompleteListNav.ts +++ b/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, diff --git a/packages/components/src/InputText/InputText.rebuilt.tsx b/packages/components/src/InputText/InputText.rebuilt.tsx index d5661829bd..c30bd7e3bc 100644 --- a/packages/components/src/InputText/InputText.rebuilt.tsx +++ b/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, }; diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/10-empty-header-footer-open-highlight-chromium.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/10-empty-header-footer-open-highlight-chromium.png index 9bb0aee988..dbb6a0e5f4 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/10-empty-header-footer-open-highlight-chromium.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/10-empty-header-footer-open-highlight-chromium.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/10-empty-header-footer-open-highlight-firefox.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/10-empty-header-footer-open-highlight-firefox.png index ed633db9f0..4eda744775 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/10-empty-header-footer-open-highlight-firefox.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/10-empty-header-footer-open-highlight-firefox.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/10-empty-header-footer-open-highlight-webkit.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/10-empty-header-footer-open-highlight-webkit.png index 0f1b3e0709..2f5c120b51 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/10-empty-header-footer-open-highlight-webkit.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/10-empty-header-footer-open-highlight-webkit.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/11-selection-open-highlight-chromium.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/11-selection-open-highlight-chromium.png index 754f74c4d2..ac390aaf5d 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/11-selection-open-highlight-chromium.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/11-selection-open-highlight-chromium.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/11-selection-open-highlight-firefox.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/11-selection-open-highlight-firefox.png index 191d444305..6d4f7e8529 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/11-selection-open-highlight-firefox.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/11-selection-open-highlight-firefox.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/11-selection-open-highlight-webkit.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/11-selection-open-highlight-webkit.png index 571506745e..9fb114901b 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/11-selection-open-highlight-webkit.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/11-selection-open-highlight-webkit.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/12-constrained-open-chromium.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/12-constrained-open-chromium.png index 7688b2c637..f9d7dea664 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/12-constrained-open-chromium.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/12-constrained-open-chromium.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/12-constrained-open-firefox.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/12-constrained-open-firefox.png index 3c5c67b013..d302b0b667 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/12-constrained-open-firefox.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/12-constrained-open-firefox.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/12-constrained-open-webkit.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/12-constrained-open-webkit.png index 6cc9fcf150..b9bd79d653 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/12-constrained-open-webkit.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/12-constrained-open-webkit.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/2-flat-options-open-highlight-chromium.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/2-flat-options-open-highlight-chromium.png index 63dc2c04fb..49e7285b36 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/2-flat-options-open-highlight-chromium.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/2-flat-options-open-highlight-chromium.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/2-flat-options-open-highlight-firefox.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/2-flat-options-open-highlight-firefox.png index 9c80f172d0..723856d9ee 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/2-flat-options-open-highlight-firefox.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/2-flat-options-open-highlight-firefox.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/2-flat-options-open-highlight-webkit.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/2-flat-options-open-highlight-webkit.png index 01110adc0b..bca5b04d48 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/2-flat-options-open-highlight-webkit.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/2-flat-options-open-highlight-webkit.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/3-flat-options-actions-open-highlight-chromium.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/3-flat-options-actions-open-highlight-chromium.png index 40b8673dcb..d04eea5068 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/3-flat-options-actions-open-highlight-chromium.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/3-flat-options-actions-open-highlight-chromium.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/3-flat-options-actions-open-highlight-firefox.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/3-flat-options-actions-open-highlight-firefox.png index 7374d190aa..b14dcb209e 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/3-flat-options-actions-open-highlight-firefox.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/3-flat-options-actions-open-highlight-firefox.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/3-flat-options-actions-open-highlight-webkit.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/3-flat-options-actions-open-highlight-webkit.png index 4cab2b2283..2514ff2ba9 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/3-flat-options-actions-open-highlight-webkit.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/3-flat-options-actions-open-highlight-webkit.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/4-flat-options-footer-open-highlight-chromium.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/4-flat-options-footer-open-highlight-chromium.png index fcc077f81c..ab2a9e2cfe 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/4-flat-options-footer-open-highlight-chromium.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/4-flat-options-footer-open-highlight-chromium.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/4-flat-options-footer-open-highlight-firefox.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/4-flat-options-footer-open-highlight-firefox.png index 614b6e3f74..5aab1a0a3c 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/4-flat-options-footer-open-highlight-firefox.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/4-flat-options-footer-open-highlight-firefox.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/4-flat-options-footer-open-highlight-webkit.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/4-flat-options-footer-open-highlight-webkit.png index 0bf9c8bd39..f60395d56f 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/4-flat-options-footer-open-highlight-webkit.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/4-flat-options-footer-open-highlight-webkit.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/5-sectioned-options-only-open-chromium.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/5-sectioned-options-only-open-chromium.png index d86337815d..3889d70e46 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/5-sectioned-options-only-open-chromium.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/5-sectioned-options-only-open-chromium.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/5-sectioned-options-only-open-firefox.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/5-sectioned-options-only-open-firefox.png index 886c892d1b..0e44e459f2 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/5-sectioned-options-only-open-firefox.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/5-sectioned-options-only-open-firefox.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/5-sectioned-options-only-open-webkit.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/5-sectioned-options-only-open-webkit.png index 53ca7d5d8a..dcbbd9c251 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/5-sectioned-options-only-open-webkit.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/5-sectioned-options-only-open-webkit.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/6-sectioned-actions-open-highlight-chromium.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/6-sectioned-actions-open-highlight-chromium.png index 940558db03..db9f5c1579 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/6-sectioned-actions-open-highlight-chromium.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/6-sectioned-actions-open-highlight-chromium.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/6-sectioned-actions-open-highlight-firefox.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/6-sectioned-actions-open-highlight-firefox.png index 45eaf3656b..5bea85eb68 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/6-sectioned-actions-open-highlight-firefox.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/6-sectioned-actions-open-highlight-firefox.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/6-sectioned-actions-open-highlight-webkit.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/6-sectioned-actions-open-highlight-webkit.png index 4957316c5e..2a5c152e74 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/6-sectioned-actions-open-highlight-webkit.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/6-sectioned-actions-open-highlight-webkit.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/7-sectioned-header-footer-open-highlight-chromium.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/7-sectioned-header-footer-open-highlight-chromium.png index 802c2263b3..cdfce7e515 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/7-sectioned-header-footer-open-highlight-chromium.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/7-sectioned-header-footer-open-highlight-chromium.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/7-sectioned-header-footer-open-highlight-firefox.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/7-sectioned-header-footer-open-highlight-firefox.png index a68cf05166..e1f44090fc 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/7-sectioned-header-footer-open-highlight-firefox.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/7-sectioned-header-footer-open-highlight-firefox.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/7-sectioned-header-footer-open-highlight-webkit.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/7-sectioned-header-footer-open-highlight-webkit.png index 0c6d6802ef..b7f904731b 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/7-sectioned-header-footer-open-highlight-webkit.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/7-sectioned-header-footer-open-highlight-webkit.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/8-loading-open-chromium.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/8-loading-open-chromium.png index 3f8602442f..4dba2d5906 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/8-loading-open-chromium.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/8-loading-open-chromium.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/8-loading-open-firefox.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/8-loading-open-firefox.png index e0cbb74249..5ff0cd362d 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/8-loading-open-firefox.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/8-loading-open-firefox.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/8-loading-open-webkit.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/8-loading-open-webkit.png index f336d5619d..2d46adfb0c 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/8-loading-open-webkit.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/8-loading-open-webkit.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/9-empty-simple-open-chromium.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/9-empty-simple-open-chromium.png index 513a3f64ef..0be732913c 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/9-empty-simple-open-chromium.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/9-empty-simple-open-chromium.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/9-empty-simple-open-firefox.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/9-empty-simple-open-firefox.png index 4871187495..9552d180f1 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/9-empty-simple-open-firefox.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/9-empty-simple-open-firefox.png differ diff --git a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/9-empty-simple-open-webkit.png b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/9-empty-simple-open-webkit.png index c69d81074a..2008aec1de 100644 Binary files a/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/9-empty-simple-open-webkit.png and b/packages/site/tests/visual/autocomplete-v2.visual.ts-snapshots/9-empty-simple-open-webkit.png differ