@lovett/ui 0.0.9 → 0.0.11

package/src/__tests__/combobox.test.tsx

@@ -0,0 +1,677 @@
+/**
+ * Combobox — APG editable combobox on lib/anchor + lib/layer-stack.
+ *
+ * Contract under test: input ARIA (role=combobox, aria-autocomplete=list,
+ * expanded, controls, activedescendant), listbox / option / group roles,
+ * client-side filtering that starts only on typing (an open single-select
+ * shows the whole list), `shouldFilter={false}` + `loading` for async, the
+ * keyboard model (arrows skipping disabled, Enter, Escape, Tab, Backspace
+ * removing chips), focus never leaving the input, single-mode revert /
+ * clear-on-empty, multi-mode chips and toggling, grouped options, the
+ * count and renderOption slots, controlled / uncontrolled value, input
+ * value and open state, layer-aware dismissal (Popover, Modal), and
+ * positioning with mocked geometry.
+ */
+import { createRef, useState } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Modal from '../modal'
+import { Popover } from '../popover'
+import {
+  Combobox,
+  type ComboboxMultipleProps,
+  type ComboboxOption,
+  type ComboboxProps,
+} from '../combobox'
+import { mockGeometry, setViewport } from './helpers/geometry'
+
+const PEOPLE: ComboboxOption[] = [
+  { value: 'ada', label: 'Ada Lovelace', description: 'ada@example.com', count: 4 },
+  { value: 'grace', label: 'Grace Hopper', count: 1234 },
+  { value: 'linus', label: 'Linus Torvalds', disabled: true },
+  { value: 'margaret', label: 'Margaret Hamilton', count: 0 },
+]
+
+function Single(props: Partial<ComboboxProps>) {
+  return <Combobox aria-label="Assignee" options={PEOPLE} {...props} />
+}
+
+const input = () => screen.getByRole('combobox', { name: 'Assignee' })
+const listbox = () => screen.getByRole('listbox')
+const option = (name: string | RegExp) => screen.getByRole('option', { name })
+const shell = () => document.querySelector<HTMLElement>('[data-slot="combobox"]')!
+
+describe('Combobox', () => {
+  describe('rendering', () => {
+    it('renders a closed combobox input inside the input-shell', () => {
+      render(<Single placeholder="Search people…" id="assignee" />)
+      const i = input()
+      expect(i.tagName).toBe('INPUT')
+      expect(i).toHaveAttribute('role', 'combobox')
+      expect(i).toHaveAttribute('aria-autocomplete', 'list')
+      expect(i).toHaveAttribute('aria-haspopup', 'listbox')
+      expect(i).toHaveAttribute('aria-expanded', 'false')
+      expect(i).not.toHaveAttribute('aria-controls')
+      expect(i).toHaveAttribute('id', 'assignee')
+      expect(i).toHaveAttribute('placeholder', 'Search people…')
+      expect(i).toHaveAttribute('autocomplete', 'off')
+      expect(shell()).toHaveClass('input-shell')
+      expect(shell()).toHaveAttribute('data-state', 'closed')
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+
+    it('size="sm" / error / disabled land on the shell; error also sets aria-invalid on the input', () => {
+      render(<Single size="sm" error disabled className="w-72" />)
+      expect(shell()).toHaveClass('size-sm', 'is-error', 'is-disabled', 'w-72')
+      expect(shell()).toHaveAttribute('data-size', 'sm')
+      expect(input()).toBeDisabled()
+      expect(input()).toHaveAttribute('aria-invalid', 'true')
+    })
+
+    it('without error the input carries no aria-invalid', () => {
+      render(<Single />)
+      expect(input()).not.toHaveAttribute('aria-invalid')
+    })
+
+    it('forwards a ref to the input', () => {
+      const ref = createRef<HTMLInputElement>()
+      render(<Combobox ref={ref} aria-label="Assignee" options={PEOPLE} />)
+      expect(ref.current).toBe(input())
+    })
+
+    it('autoFocus focuses the input on mount and marks it data-autofocus for Popover', () => {
+      render(<Single autoFocus />)
+      expect(document.activeElement).toBe(input())
+      expect(input()).toHaveAttribute('data-autofocus')
+    })
+
+    it('shows the selected label in single mode', () => {
+      render(<Single value="grace" />)
+      expect(input()).toHaveValue('Grace Hopper')
+    })
+  })
+
+  describe('opening + filtering', () => {
+    it('typing opens the list and filters by label, case-insensitively', async () => {
+      render(<Single />)
+      await userEvent.type(input(), 'gra')
+      expect(input()).toHaveAttribute('aria-expanded', 'true')
+      expect(input()).toHaveAttribute('aria-controls', listbox().id)
+      expect(screen.getAllByRole('option')).toHaveLength(1)
+      expect(option(/^Grace Hopper/)).toBeInTheDocument()
+    })
+
+    it('the default filter also matches the description', async () => {
+      render(<Single />)
+      await userEvent.type(input(), 'ada@')
+      expect(screen.getAllByRole('option')).toHaveLength(1)
+      expect(option(/^Ada Lovelace/)).toBeInTheDocument()
+    })
+
+    it('shows the empty message (default and custom) when nothing matches', async () => {
+      const { unmount } = render(<Single />)
+      await userEvent.type(input(), 'zzz')
+      expect(listbox()).toHaveTextContent('No results')
+      expect(screen.queryByRole('option')).toBeNull()
+      unmount()
+
+      render(<Single emptyMessage="Nobody here" />)
+      await userEvent.type(input(), 'zzz')
+      expect(listbox()).toHaveTextContent('Nobody here')
+    })
+
+    it('shouldFilter={false} shows the options exactly as given', async () => {
+      render(<Single shouldFilter={false} />)
+      await userEvent.type(input(), 'zzz')
+      expect(screen.getAllByRole('option')).toHaveLength(4)
+    })
+
+    it('a custom filter replaces the default', async () => {
+      render(<Single filter={(o, q) => o.value.startsWith(q)} />)
+      await userEvent.type(input(), 'mar')
+      expect(screen.getAllByRole('option')).toHaveLength(1)
+      expect(option(/^Margaret/)).toBeInTheDocument()
+    })
+
+    it('clicking the input opens the full list; the chevron toggles it without taking focus', async () => {
+      render(<Single />)
+      await userEvent.click(input())
+      expect(screen.getAllByRole('option')).toHaveLength(4)
+      expect(document.activeElement).toBe(input())
+      const chevron = screen.getByRole('button', { name: 'Close options' })
+      await userEvent.click(chevron)
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(document.activeElement).toBe(input())
+      await userEvent.click(screen.getByRole('button', { name: 'Open options' }))
+      expect(listbox()).toBeInTheDocument()
+    })
+
+    it('an open single-select with a value shows the whole list, not the one label match', async () => {
+      render(<Single value="grace" />)
+      await userEvent.click(input())
+      expect(screen.getAllByRole('option')).toHaveLength(4)
+      expect(option(/^Grace Hopper/)).toHaveAttribute('aria-selected', 'true')
+      expect(input()).toHaveAttribute('aria-activedescendant', option(/^Grace Hopper/).id)
+    })
+
+    it('loading: aria-busy on the listbox, spinner in the shell, loading message while empty', async () => {
+      const { unmount } = render(<Single loading options={[]} />)
+      await userEvent.click(input())
+      expect(listbox()).toHaveAttribute('aria-busy', 'true')
+      expect(listbox()).toHaveTextContent('Loading…')
+      expect(shell().querySelector('.animate-spin')).not.toBeNull()
+      unmount()
+
+      render(<Single loading loadingMessage="Fetching people" options={[]} />)
+      await userEvent.click(input())
+      expect(listbox()).toHaveTextContent('Fetching people')
+    })
+
+    it('reports the query through onInputValueChange and follows a controlled inputValue', async () => {
+      const onInputValueChange = vi.fn()
+      const { rerender } = render(
+        <Single inputValue="" onInputValueChange={onInputValueChange} />,
+      )
+      await userEvent.type(input(), 'g')
+      expect(onInputValueChange).toHaveBeenCalledWith('g')
+      // The parent did not adopt it: the input stays as controlled.
+      expect(input()).toHaveValue('')
+      rerender(<Single inputValue="gra" onInputValueChange={onInputValueChange} />)
+      expect(input()).toHaveValue('gra')
+      expect(screen.getAllByRole('option')).toHaveLength(1)
+    })
+  })
+
+  describe('rows', () => {
+    it('renders the count slot with locale formatting and the description line', async () => {
+      render(<Single />)
+      await userEvent.click(input())
+      expect(option(/^Grace Hopper/)).toHaveTextContent('1,234')
+      expect(option(/^Grace Hopper/).querySelector('.tabular-nums')).toHaveTextContent('1,234')
+      expect(option(/^Ada Lovelace/)).toHaveTextContent('ada@example.com')
+      expect(option(/^Ada Lovelace/)).toHaveTextContent('4')
+      expect(option(/^Margaret/)).toHaveTextContent('0')
+    })
+
+    it('renderOption replaces the row body and receives the row state + query', async () => {
+      const renderOption = vi.fn((o: ComboboxOption, state: { selected: boolean; highlighted: boolean; query: string }) => (
+        <span data-testid={`row-${o.value}`}>
+          {o.label.toUpperCase()} {state.selected ? 'selected' : ''} {state.highlighted ? 'hl' : ''} q={state.query}
+        </span>
+      ))
+      render(<Single value="grace" renderOption={renderOption} />)
+      await userEvent.type(input(), 'gr')
+      const row = screen.getByTestId('row-grace')
+      expect(row).toHaveTextContent('GRACE HOPPER selected hl q=gr')
+      // The default body (count) is gone.
+      expect(row.closest('[role="option"]')).not.toHaveTextContent('1,234')
+    })
+
+    it('groups: `groups` fixes order + labels, ungrouped first, unknown keys trail', async () => {
+      const options: ComboboxOption[] = [
+        { value: 'a', label: 'Archived', group: 'closed' },
+        { value: 'n', label: 'None' },
+        { value: 't', label: 'To do', group: 'open' },
+        { value: 'd', label: 'Done', group: 'closed' },
+        { value: 'x', label: 'Odd', group: 'mystery' },
+      ]
+      render(
+        <Single
+          options={options}
+          groups={[
+            { id: 'open', label: 'Open' },
+            { id: 'closed', label: 'Closed' },
+          ]}
+        />,
+      )
+      await userEvent.click(input())
+      const groups = screen.getAllByRole('group')
+      expect(groups.map((g) => g.getAttribute('aria-labelledby'))).toHaveLength(3)
+      expect(screen.getByRole('group', { name: 'Open' })).toBeInTheDocument()
+      expect(screen.getByRole('group', { name: 'Closed' })).toBeInTheDocument()
+      expect(screen.getByRole('group', { name: 'mystery' })).toBeInTheDocument()
+      const names = screen.getAllByRole('option').map((o) => o.textContent)
+      expect(names).toEqual(['None', 'To do', 'Archived', 'Done', 'Odd'])
+    })
+
+    it('groups: derived from the options in first-appearance order when `groups` is omitted', async () => {
+      render(
+        <Single
+          options={[
+            { value: 'b1', label: 'B one', group: 'B' },
+            { value: 'a1', label: 'A one', group: 'A' },
+            { value: 'b2', label: 'B two', group: 'B' },
+          ]}
+        />,
+      )
+      await userEvent.click(input())
+      expect(screen.getAllByRole('group').map((g) => g.getAttribute('aria-labelledby')?.length)).toHaveLength(2)
+      expect(screen.getAllByRole('option').map((o) => o.textContent)).toEqual(['B one', 'B two', 'A one'])
+    })
+
+    it('arrow keys walk grouped options in visual order', async () => {
+      render(
+        <Single
+          options={[
+            { value: 'n', label: 'None' },
+            { value: 't', label: 'To do', group: 'open' },
+            { value: 'd', label: 'Done', group: 'closed' },
+          ]}
+        />,
+      )
+      await userEvent.click(input())
+      expect(input()).toHaveAttribute('aria-activedescendant', option('None').id)
+      await userEvent.keyboard('{ArrowDown}')
+      expect(input()).toHaveAttribute('aria-activedescendant', option('To do').id)
+      await userEvent.keyboard('{ArrowDown}')
+      expect(input()).toHaveAttribute('aria-activedescendant', option('Done').id)
+    })
+  })
+
+  describe('keyboard (single)', () => {
+    it('ArrowDown opens on the first enabled option; arrows skip disabled and stop at the ends', async () => {
+      render(<Single />)
+      input().focus()
+      await userEvent.keyboard('{ArrowDown}')
+      expect(listbox()).toBeInTheDocument()
+      expect(input()).toHaveAttribute('aria-activedescendant', option(/^Ada/).id)
+      await userEvent.keyboard('{ArrowDown}')
+      expect(input()).toHaveAttribute('aria-activedescendant', option(/^Grace/).id)
+      // Linus is disabled — skipped.
+      await userEvent.keyboard('{ArrowDown}')
+      expect(input()).toHaveAttribute('aria-activedescendant', option(/^Margaret/).id)
+      await userEvent.keyboard('{ArrowDown}')
+      expect(input()).toHaveAttribute('aria-activedescendant', option(/^Margaret/).id)
+      await userEvent.keyboard('{ArrowUp}{ArrowUp}')
+      expect(input()).toHaveAttribute('aria-activedescendant', option(/^Ada/).id)
+      await userEvent.keyboard('{ArrowUp}')
+      expect(input()).toHaveAttribute('aria-activedescendant', option(/^Ada/).id)
+      expect(document.activeElement).toBe(input())
+    })
+
+    it('ArrowUp also opens the list', async () => {
+      render(<Single />)
+      input().focus()
+      await userEvent.keyboard('{ArrowUp}')
+      expect(listbox()).toBeInTheDocument()
+    })
+
+    it('Enter picks the highlighted option: value, label in the input, list closed, focus kept', async () => {
+      const onValueChange = vi.fn()
+      render(<Single onValueChange={onValueChange} />)
+      await userEvent.type(input(), 'gr')
+      await userEvent.keyboard('{Enter}')
+      expect(onValueChange).toHaveBeenCalledWith('grace')
+      expect(onValueChange).toHaveBeenCalledTimes(1)
+      expect(input()).toHaveValue('Grace Hopper')
+      expect(input()).toHaveAttribute('aria-expanded', 'false')
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(document.activeElement).toBe(input())
+    })
+
+    it('Enter while open keeps an enclosing form from submitting', async () => {
+      const onSubmit = vi.fn((e: React.FormEvent) => e.preventDefault())
+      render(
+        <form onSubmit={onSubmit}>
+          <Single />
+        </form>,
+      )
+      await userEvent.type(input(), 'gr{Enter}')
+      expect(onSubmit).not.toHaveBeenCalled()
+    })
+
+    it('Escape closes and REVERTS an edited query to the selected label; no value change', async () => {
+      const onValueChange = vi.fn()
+      render(<Single value="grace" onValueChange={onValueChange} />)
+      await userEvent.click(input())
+      await userEvent.clear(input())
+      await userEvent.keyboard('{Escape}')
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(input()).toHaveValue('Grace Hopper')
+      expect(onValueChange).not.toHaveBeenCalled()
+      expect(document.activeElement).toBe(input())
+    })
+
+    it('leaving the field with the text emptied clears the value; leaving with text reverts', async () => {
+      const onValueChange = vi.fn()
+      const { unmount } = render(
+        <>
+          <Single value="grace" onValueChange={onValueChange} />
+          <button type="button">Next</button>
+        </>,
+      )
+      await userEvent.click(input())
+      await userEvent.clear(input())
+      await userEvent.tab()
+      expect(onValueChange).toHaveBeenCalledWith(null)
+      expect(screen.queryByRole('listbox')).toBeNull()
+      unmount()
+
+      const onRevert = vi.fn()
+      render(
+        <>
+          <Single value="grace" onValueChange={onRevert} />
+          <button type="button">Next</button>
+        </>,
+      )
+      await userEvent.type(input(), 'xyz')
+      await userEvent.tab()
+      expect(onRevert).not.toHaveBeenCalled()
+      expect(input()).toHaveValue('Grace Hopper')
+    })
+
+    it('focusing selects the label text so typing replaces it', async () => {
+      render(
+        <>
+          <button type="button">Before</button>
+          <Single value="grace" />
+        </>,
+      )
+      screen.getByRole('button', { name: 'Before' }).focus()
+      await userEvent.tab()
+      const i = input() as HTMLInputElement
+      expect(document.activeElement).toBe(i)
+      expect(i.selectionStart).toBe(0)
+      expect(i.selectionEnd).toBe('Grace Hopper'.length)
+      await userEvent.keyboard('marg')
+      expect(i).toHaveValue('marg')
+      expect(screen.getAllByRole('option')).toHaveLength(1)
+      expect(option(/^Margaret/)).toBeInTheDocument()
+    })
+
+    it('does not listen for Escape while closed', async () => {
+      const onOpenChange = vi.fn()
+      render(<Single onOpenChange={onOpenChange} />)
+      input().focus()
+      await userEvent.keyboard('{Escape}')
+      expect(onOpenChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('mouse (single)', () => {
+    it('clicking an option picks it and keeps focus in the input', async () => {
+      const onValueChange = vi.fn()
+      render(<Single onValueChange={onValueChange} />)
+      await userEvent.click(input())
+      await userEvent.click(option(/^Margaret/))
+      expect(onValueChange).toHaveBeenCalledWith('margaret')
+      expect(input()).toHaveValue('Margaret Hamilton')
+      expect(document.activeElement).toBe(input())
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+
+    it('hovering moves the highlight; a disabled option cannot be picked and does not steal focus', async () => {
+      const onValueChange = vi.fn()
+      render(<Single onValueChange={onValueChange} />)
+      await userEvent.click(input())
+      await userEvent.hover(option(/^Margaret/))
+      expect(input()).toHaveAttribute('aria-activedescendant', option(/^Margaret/).id)
+      expect(option(/^Linus/)).toHaveAttribute('aria-disabled', 'true')
+      // Hovering a disabled row leaves the highlight where it was.
+      await userEvent.hover(option(/^Linus/))
+      expect(input()).toHaveAttribute('aria-activedescendant', option(/^Margaret/).id)
+      await userEvent.click(option(/^Linus/))
+      expect(onValueChange).not.toHaveBeenCalled()
+      expect(listbox()).toBeInTheDocument()
+      expect(document.activeElement).toBe(input())
+    })
+
+    it('closes on an outside click', async () => {
+      render(
+        <>
+          <Single />
+          <button type="button">Elsewhere</button>
+        </>,
+      )
+      await userEvent.click(input())
+      await userEvent.click(screen.getByRole('button', { name: 'Elsewhere' }))
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+  })
+
+  describe('multiple', () => {
+    type MultiRest = Omit<
+      Partial<ComboboxMultipleProps>,
+      'multiple' | 'value' | 'defaultValue' | 'onValueChange'
+    >
+    function Multi(props: MultiRest & { onChange?: (v: string[]) => void }) {
+      const { onChange, ...rest } = props
+      const [value, setValue] = useState<string[]>(['ada'])
+      return (
+        <>
+          <span data-testid="value">{value.join(',')}</span>
+          <Combobox
+            multiple
+            aria-label="Assignee"
+            options={PEOPLE}
+            value={value}
+            onValueChange={(next) => {
+              setValue(next)
+              onChange?.(next)
+            }}
+            {...rest}
+          />
+        </>
+      )
+    }
+    const chip = (label: string) => screen.getByRole('button', { name: `Remove ${label}` })
+
+    it('renders chips for the selection and marks the listbox multiselectable', async () => {
+      render(<Multi />)
+      expect(chip('Ada Lovelace')).toBeInTheDocument()
+      expect(shell()).toHaveClass('has-leading')
+      expect(shell().style.height).toBe('auto')
+      await userEvent.click(input())
+      expect(listbox()).toHaveAttribute('aria-multiselectable', 'true')
+      expect(option(/^Ada/)).toHaveAttribute('aria-selected', 'true')
+      expect(option(/^Grace/)).toHaveAttribute('aria-selected', 'false')
+    })
+
+    it('picking toggles membership and keeps the list open; the query is kept', async () => {
+      const onChange = vi.fn()
+      render(<Multi onChange={onChange} />)
+      await userEvent.type(input(), 'a')
+      await userEvent.click(option(/^Grace/))
+      expect(onChange).toHaveBeenLastCalledWith(['ada', 'grace'])
+      expect(listbox()).toBeInTheDocument()
+      expect(input()).toHaveValue('a')
+      expect(chip('Grace Hopper')).toBeInTheDocument()
+      await userEvent.click(option(/^Ada/))
+      expect(onChange).toHaveBeenLastCalledWith(['grace'])
+      expect(screen.queryByRole('button', { name: 'Remove Ada Lovelace' })).toBeNull()
+      expect(document.activeElement).toBe(input())
+    })
+
+    it('Enter toggles the highlighted option', async () => {
+      render(<Multi />)
+      input().focus()
+      await userEvent.keyboard('{ArrowDown}{ArrowDown}{Enter}')
+      expect(screen.getByTestId('value')).toHaveTextContent('ada,grace')
+      expect(listbox()).toBeInTheDocument()
+    })
+
+    it('Backspace on an empty input removes the last chip', async () => {
+      render(<Multi />)
+      input().focus()
+      await userEvent.keyboard('{Backspace}')
+      expect(screen.getByTestId('value')).toHaveTextContent('')
+      expect(screen.queryByRole('button', { name: /Remove/ })).toBeNull()
+    })
+
+    it('Backspace with text in the input edits the text, not the chips', async () => {
+      render(<Multi />)
+      await userEvent.type(input(), 'ab')
+      await userEvent.keyboard('{Backspace}')
+      expect(input()).toHaveValue('a')
+      expect(chip('Ada Lovelace')).toBeInTheDocument()
+    })
+
+    it('the chip remove button removes it and refocuses the input', async () => {
+      render(<Multi />)
+      await userEvent.click(chip('Ada Lovelace'))
+      expect(screen.getByTestId('value')).toHaveTextContent('')
+      expect(document.activeElement).toBe(input())
+    })
+
+    it('closing clears the query text', async () => {
+      render(<Multi />)
+      await userEvent.type(input(), 'gr')
+      await userEvent.keyboard('{Escape}')
+      expect(input()).toHaveValue('')
+    })
+
+    it('falls back to the raw value for a chip whose option is absent', () => {
+      render(<Combobox multiple aria-label="Assignee" options={[]} value={['ghost']} />)
+      expect(screen.getByRole('button', { name: 'Remove ghost' })).toBeInTheDocument()
+    })
+
+    it('uncontrolled multi: defaultValue seeds and picks accumulate', async () => {
+      render(<Combobox multiple aria-label="Assignee" options={PEOPLE} defaultValue={['grace']} />)
+      expect(chip('Grace Hopper')).toBeInTheDocument()
+      await userEvent.click(input())
+      await userEvent.click(option(/^Margaret/))
+      expect(chip('Margaret Hamilton')).toBeInTheDocument()
+      expect(chip('Grace Hopper')).toBeInTheDocument()
+    })
+  })
+
+  describe('controlled / uncontrolled (single)', () => {
+    it('uncontrolled: defaultValue seeds the label and picks update it', async () => {
+      render(<Single defaultValue="ada" />)
+      expect(input()).toHaveValue('Ada Lovelace')
+      await userEvent.click(input())
+      await userEvent.click(option(/^Grace/))
+      expect(input()).toHaveValue('Grace Hopper')
+    })
+
+    it('controlled: a parent that ignores onValueChange keeps the old label', async () => {
+      const onValueChange = vi.fn()
+      render(<Single value="ada" onValueChange={onValueChange} />)
+      await userEvent.click(input())
+      await userEvent.click(option(/^Grace/))
+      expect(onValueChange).toHaveBeenCalledWith('grace')
+      expect(input()).toHaveValue('Ada Lovelace')
+    })
+
+    it('controlled open: reports through onOpenChange and follows `open`', async () => {
+      function ControlledOpen() {
+        const [open, setOpen] = useState(false)
+        return (
+          <>
+            <span data-testid="state">{open ? 'open' : 'closed'}</span>
+            <Single open={open} onOpenChange={setOpen} />
+          </>
+        )
+      }
+      render(<ControlledOpen />)
+      await userEvent.click(input())
+      expect(screen.getByTestId('state')).toHaveTextContent('open')
+      await userEvent.keyboard('{Escape}')
+      expect(screen.getByTestId('state')).toHaveTextContent('closed')
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+  })
+
+  describe('layers', () => {
+    it('inside a Modal, Escape closes only the list; the next Escape closes the modal', async () => {
+      const onClose = vi.fn()
+      render(
+        <Modal isOpen onClose={onClose} title="Settings">
+          <Single />
+        </Modal>,
+      )
+      await userEvent.click(input())
+      await userEvent.keyboard('{Escape}')
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(onClose).not.toHaveBeenCalled()
+      await userEvent.keyboard('{Escape}')
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('inside a Popover, picking an option does not close the popover; autoFocus lands on the input', async () => {
+      const onValueChange = vi.fn()
+      render(
+        <Popover defaultOpen>
+          <Popover.Trigger>Open</Popover.Trigger>
+          <Popover.Content aria-label="Assign">
+            <button type="button">Decoy</button>
+            <Single autoFocus onValueChange={onValueChange} />
+          </Popover.Content>
+        </Popover>,
+      )
+      expect(document.activeElement).toBe(input())
+      await userEvent.type(input(), 'mar')
+      await userEvent.click(option(/^Margaret/))
+      expect(onValueChange).toHaveBeenCalledWith('margaret')
+      expect(screen.getByRole('dialog', { name: 'Assign' })).toBeInTheDocument()
+      await userEvent.keyboard('{Escape}')
+      expect(screen.queryByRole('dialog')).toBeNull()
+    })
+
+    it('inside a Popover, autoFocus waits for the popover to be positioned - the parked frame cannot take focus in a browser', () => {
+      // The Combobox mount effect runs BEFORE the popover has measured; in a
+      // browser that focus() is refused (visibility:hidden), so it must not
+      // fire, and the popover's own positioned focus lands instead. jsdom
+      // would honour the early call, hence recording the state at focus time.
+      const atFocus: string[] = []
+      const onFocus = (event: FocusEvent) => {
+        const target = event.target
+        if (target instanceof HTMLElement && target.getAttribute('role') === 'combobox') {
+          atFocus.push(
+            target.closest('[data-slot="popover-content"]')?.getAttribute('data-positioned') ??
+              'missing',
+          )
+        }
+      }
+      document.addEventListener('focus', onFocus, true)
+      try {
+        render(
+          <Popover defaultOpen>
+            <Popover.Trigger>Open</Popover.Trigger>
+            <Popover.Content aria-label="Assign">
+              <button type="button">Decoy</button>
+              <Single autoFocus />
+            </Popover.Content>
+          </Popover>,
+        )
+        expect(document.activeElement).toBe(input())
+        expect(atFocus).toEqual(['true'])
+      } finally {
+        document.removeEventListener('focus', onFocus, true)
+      }
+    })
+  })
+
+  describe('positioning (mocked geometry)', () => {
+    let restore: () => void
+    beforeEach(() => {
+      restore = mockGeometry()
+      setViewport(1000, 800)
+    })
+    afterEach(() => restore())
+
+    it('opens under the shell, at least as wide as it', async () => {
+      render(<Single listboxClassName="w-80" />)
+      shell().setAttribute('data-rect', '400,300,240,40')
+      shell().setAttribute('data-size', '240,40')
+      await userEvent.click(input())
+      const list = listbox()
+      expect(list.style.position).toBe('fixed')
+      expect(list.style.left).toBe('400px')
+      expect(list.style.top).toBe('346px')
+      expect(list.style.minWidth).toBe('240px')
+      expect(list).toHaveAttribute('data-side', 'bottom')
+      expect(list).toHaveAttribute('data-positioned', 'true')
+      expect(list).toHaveClass('ds-enter-pop', 'w-80')
+      expect(list.style.background).toContain('--popover')
+    })
+
+    it('flips above the shell at the bottom of the viewport', async () => {
+      render(<Single />)
+      shell().setAttribute('data-rect', '400,780,240,40')
+      await userEvent.click(input())
+      expect(listbox()).toHaveAttribute('data-side', 'top')
+    })
+  })
+})