diff --git a/packages/react/src/select/root/SelectRoot.test.tsx b/packages/react/src/select/root/SelectRoot.test.tsx index 0e276997e75..fe419c16684 100644 --- a/packages/react/src/select/root/SelectRoot.test.tsx +++ b/packages/react/src/select/root/SelectRoot.test.tsx @@ -963,6 +963,148 @@ describe('', () => { expect(screen.getByRole('option', { name: 'b' })).toHaveAttribute('data-highlighted'); }); }); + + it('recomputes positioning before the popup becomes visible again after touch dismiss', async ({ + onTestFinished, + }) => { + globalThis.BASE_UI_ANIMATIONS_DISABLED = false; + onTestFinished(() => { + globalThis.BASE_UI_ANIMATIONS_DISABLED = true; + }); + + const onOpenChangeComplete = vi.fn(); + const items = Array.from({ length: 80 }, (_, index) => `Item ${index + 1}`); + const style = ` + @keyframes select-reopen-test { + to { + opacity: 0; + transform: scale(0.9); + } + } + + .reopen-test-popup { + width: 120px; + transition: + transform 150ms, + opacity 150ms; + } + + .reopen-test-popup[data-starting-style], + .reopen-test-popup[data-ending-style] { + animation: select-reopen-test 20ms linear; + } + + .reopen-test-list { + max-height: var(--available-height); + overflow-y: auto; + } + `; + + function Test() { + const [open, setOpen] = React.useState(false); + const [paddingTop, setPaddingTop] = React.useState(0); + const triggerRef = React.useRef(null); + + React.useLayoutEffect(() => { + const trigger = triggerRef.current; + if (!trigger) { + return; + } + + const gap = + document.documentElement.clientHeight - trigger.getBoundingClientRect().bottom; + if (Math.abs(gap - 100) <= 1) { + return; + } + + setPaddingTop((prev) => prev + gap - 100); + }, [paddingTop]); + + return ( +
+ {/* eslint-disable-next-line react/no-danger */} +