diff --git a/.changeset/new-lamps-doubt.md b/.changeset/new-lamps-doubt.md new file mode 100644 index 00000000000..9444d653662 --- /dev/null +++ b/.changeset/new-lamps-doubt.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Fix positioning of Autocomplete overlay menu when tokens are present diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png index 62ddfe43656..ab1b107ecf6 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png index ff6a0219cb6..a919c5e23ac 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png index d67fbd18ebf..375ac5f4441 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png index 62ddfe43656..ab1b107ecf6 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png index 62ddfe43656..ab1b107ecf6 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png index 56a90ace378..35e829b6dda 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png index b45a0356c54..874df777029 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png index 56a90ace378..35e829b6dda 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png index 56a90ace378..35e829b6dda 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png index fb14840e742..ec6f3d89c01 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png index 5be69e7cf10..34a12300bf0 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png index e836067a5ea..d1d8f6a6483 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png index fb14840e742..ec6f3d89c01 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png index fb14840e742..ec6f3d89c01 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png index 3f8227b0613..b7f2fccc50e 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png index 993c92adbf9..32e82fb20a4 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png index 3f8227b0613..b7f2fccc50e 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png index 3f8227b0613..b7f2fccc50e 100644 Binary files a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png differ diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.module.css b/packages/react/src/Autocomplete/Autocomplete.features.stories.module.css index c12376dceeb..913e5e5cdfa 100644 --- a/packages/react/src/Autocomplete/Autocomplete.features.stories.module.css +++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.module.css @@ -56,3 +56,14 @@ overflow: auto; flex-grow: 1; } + +.InputWithStateLabel { + display: inline-flex; + align-items: flex-end; + gap: var(--base-size-24); +} + +.StateLabelInline { + white-space: nowrap; + margin-bottom: var(--base-size-4); +} diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx index 55fa35d8389..bf7644c10c9 100644 --- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx +++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx @@ -379,22 +379,27 @@ export const WithCallbackWhenOverlayOpenStateChanges = () => { return ( - - Default label - - - - - - - -
- The menu is {isMenuOpen ? 'opened' : 'closed'} +
+
+ + Default label + + + + + + + +
+ +
+ The menu is {isMenuOpen ? 'open' : 'closed'} +
) diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx index caa70236e7a..0755434225e 100644 --- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx +++ b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx @@ -1,5 +1,5 @@ import type React from 'react' -import {useCallback, useContext} from 'react' +import {useCallback, useContext, useEffect, useRef} from 'react' import {useAnchoredPosition} from '../hooks' import type {OverlayProps} from '../Overlay' import Overlay from '../Overlay' @@ -37,11 +37,22 @@ function AutocompleteOverlay({ } const overlayProps = {...oldOverlayProps, ...newOverlayProps} const {inputRef, scrollContainerRef, selectedItemLength, setShowMenu, showMenu = false} = autocompleteContext + + const computedAnchorRef = useRef(null) + useEffect(() => { + const explicit = menuAnchorRef?.current ?? null + const tokensContainer = inputRef.current + ? (inputRef.current.closest('[data-prevent-token-wrapping]') as HTMLElement | null) + : null + const tokensRoot = tokensContainer?.parentElement ?? null + computedAnchorRef.current = explicit ?? tokensRoot ?? inputRef.current + }, [menuAnchorRef, inputRef]) + const {floatingElementRef, position} = useAnchoredPosition( { side: 'outside-bottom', align: 'start', - anchorElementRef: menuAnchorRef ? menuAnchorRef : inputRef, + anchorElementRef: computedAnchorRef as React.RefObject, }, [showMenu, selectedItemLength], )