@open-mercato/ui 0.7.1-develop.7122.1.421cefe668 → 0.7.1-develop.7130.1.fef2396fd8

package/src/backend/inputs/ComboboxInput.tsx

@@ -5,6 +5,7 @@ import { X } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '../../primitives/button'
 import { IconButton } from '../../primitives/icon-button'
+import { Popover, PopoverAnchor, PopoverContent } from '../../primitives/popover'
 
 export type ComboboxOption = {
   value: string
@@ -412,82 +413,114 @@ export function ComboboxInput({
     && (loading || filteredSuggestions.length > 0 || (touched && input.trim().length > 0))
 
   return (
-    <div className="relative w-full">
-      {/* Use raw <input> here instead of the DS Input primitive: ComboboxInput's
-          focus / suggestions-popup interplay relies on the trigger being a plain
-          input element. The DS wrapper introduces a <div> that desyncs autocomplete
-          on this specific surface. Keeps the rest of the form on Input primitive. */}
-      <input
-        ref={inputRef}
-        type="text"
-        className={[
-          'w-full h-9 rounded-md border border-input bg-background px-3 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:shadow-focus focus-visible:border-foreground disabled:bg-bg-disabled disabled:border-border-disabled disabled:text-muted-foreground disabled:cursor-not-allowed',
-          showClearButton ? 'pr-9' : '',
-        ]
-          .filter(Boolean)
-          .join(' ')}
-        value={input}
-        placeholder={resolvedPlaceholder}
-        autoFocus={autoFocus}
-        data-crud-focus-target=""
-        disabled={disabled}
-        role="combobox"
-        aria-expanded={listboxVisible}
-        aria-controls={listboxVisible && !loading && filteredSuggestions.length > 0 ? listboxId : undefined}
-        aria-autocomplete="list"
-        aria-activedescendant={listboxVisible && selectedIndex >= 0 ? optionDomId(selectedIndex) : undefined}
-        onFocus={() => {
-          setTouched(true)
-          if (suppressOpenOnFocusRef.current) {
-            suppressOpenOnFocusRef.current = false
-            return
-          }
-          resetBlurCloseState()
-          if (loadSuggestions && availableOptions.length === 0) {
-            setLoading(true)
-          }
-          setShowSuggestions(true)
-        }}
-        onChange={(event) => {
-          setTouched(true)
-          userTypedRef.current = true
-          setInput(event.target.value)
-          setShowSuggestions(true)
-          setSelectedIndex(-1)
-        }}
-        onKeyDown={handleKeyDown}
-        onBlur={() => {
-          // Delay closing so clicks on the popup can resolve first. If async
-          // suggestions are still loading, keep the dropdown open instead of
-          // closing before the first payload arrives.
-          userTypedRef.current = false
-          blurClosePendingRef.current = true
-          clearBlurCloseTimer()
-          if (loadingRef.current) {
-            blurCloseTimerRef.current = window.setTimeout(closeAfterBlur, blurCloseMaxDelayMs)
-            return
-          }
-          blurCloseTimerRef.current = window.setTimeout(attemptBlurClose, blurCloseDelayMs)
-        }}
-      />
-
-      {showClearButton ? (
-        <IconButton
-          type="button"
-          variant="ghost"
-          size="xs"
-          aria-label={resolvedClearLabel}
-          className="absolute right-1 top-1/2 -translate-y-1/2"
-          onMouseDown={(event) => event.preventDefault()}
-          onClick={handleClear}
-        >
-          <X className="size-3" />
-        </IconButton>
-      ) : null}
-
-      {listboxVisible && (
-        <div
-          className="absolute z-popover w-full mt-1 rounded-md border border-input bg-popover p-2 shadow-md max-h-48 sm:max-h-60 overflow-auto"
+    // The suggestion list goes through the DS Popover so it is portaled out of any
+    // scrolling ancestor. Rendered in place it was clipped by a Dialog's
+    // `overflow-y-auto`, where z-index cannot help. `open` stays fully controlled
+    // (no `onOpenChange`) so the blur timer, Escape and selection keep owning
+    // dismissal exactly as before.
+    <Popover open={listboxVisible}>
+      <PopoverAnchor asChild>
+        <div className="relative w-full">
+          {/* Use raw <input> here instead of the DS Input primitive: ComboboxInput's
+              focus / suggestions-popup interplay relies on the trigger being a plain
+              input element. The DS wrapper introduces a <div> that desyncs autocomplete
+              on this specific surface. Keeps the rest of the form on Input primitive. */}
+          <input
+            ref={inputRef}
+            type="text"
+            className={[
+              'w-full h-9 rounded-md border border-input bg-background px-3 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:shadow-focus focus-visible:border-foreground disabled:bg-bg-disabled disabled:border-border-disabled disabled:text-muted-foreground disabled:cursor-not-allowed',
+              showClearButton ? 'pr-9' : '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            value={input}
+            placeholder={resolvedPlaceholder}
+            autoFocus={autoFocus}
+            data-crud-focus-target=""
+            disabled={disabled}
+            role="combobox"
+            aria-expanded={listboxVisible}
+            aria-controls={listboxVisible && !loading && filteredSuggestions.length > 0 ? listboxId : undefined}
+            // The listbox is portaled out of the input's subtree, so `aria-owns` is what
+            // makes it a logical descendant and keeps `aria-activedescendant` below valid.
+            aria-owns={listboxVisible && !loading && filteredSuggestions.length > 0 ? listboxId : undefined}
+            aria-autocomplete="list"
+            aria-activedescendant={listboxVisible && selectedIndex >= 0 ? optionDomId(selectedIndex) : undefined}
+            onFocus={() => {
+              setTouched(true)
+              if (suppressOpenOnFocusRef.current) {
+                suppressOpenOnFocusRef.current = false
+                return
+              }
+              resetBlurCloseState()
+              if (loadSuggestions && availableOptions.length === 0) {
+                setLoading(true)
+              }
+              setShowSuggestions(true)
+            }}
+            onChange={(event) => {
+              setTouched(true)
+              userTypedRef.current = true
+              setInput(event.target.value)
+              setShowSuggestions(true)
+              setSelectedIndex(-1)
+            }}
+            onKeyDown={handleKeyDown}
+            onBlur={() => {
+              // Delay closing so clicks on the popup can resolve first. If async
+              // suggestions are still loading, keep the dropdown open instead of
+              // closing before the first payload arrives.
+              userTypedRef.current = false
+              blurClosePendingRef.current = true
+              clearBlurCloseTimer()
+              if (loadingRef.current) {
+                blurCloseTimerRef.current = window.setTimeout(closeAfterBlur, blurCloseMaxDelayMs)
+                return
+              }
+              blurCloseTimerRef.current = window.setTimeout(attemptBlurClose, blurCloseDelayMs)
+            }}
+          />
+
+          {showClearButton ? (
+            <IconButton
+              type="button"
+              variant="ghost"
+              size="xs"
+              aria-label={resolvedClearLabel}
+              className="absolute right-1 top-1/2 -translate-y-1/2"
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={handleClear}
+            >
+              <X className="size-3" />
+            </IconButton>
+          ) : null}
+        </div>
+      </PopoverAnchor>
+
+      {/* Unmount the content outright rather than leaning on Radix's exit animation:
+          a closing-but-still-mounted layer keeps swallowing Escape, which would
+          strand the popup's host (see AdvancedFilterPanel for that failure mode). */}
+      {listboxVisible ? (
+        <PopoverContent
+          // Radix hardcodes `role="dialog"` on popover content. This popup is a
+          // positioning shell around the listbox below, and a second dialog node
+          // would both misdescribe it and break `getByRole('dialog')` for anything
+          // that queries while suggestions happen to be open.
+          role="presentation"
+          // Focus must stay in the input: the blur-close timer and
+          // aria-activedescendant model depend on it, and Radix would otherwise
+          // move focus into the list on open and back to the trigger on close.
+          onOpenAutoFocus={(event) => event.preventDefault()}
+          onCloseAutoFocus={(event) => event.preventDefault()}
+          // A modal Dialog locks scrolling through `react-remove-scroll`, which
+          // cancels document-level `wheel` and `touchmove` outside its own content
+          // node. The portaled list is not part of that exemption, so without these
+          // a long list inside a dialog cannot be scrolled by wheel or by touch.
+          // `overscroll-contain` stops the scroll chaining to the page at the ends.
+          onWheel={(event) => event.stopPropagation()}
+          onTouchMove={(event) => event.stopPropagation()}
+          className="w-[var(--radix-popover-trigger-width)] min-w-0 max-h-48 sm:max-h-60 overflow-auto overscroll-contain border-input p-2"
         >
           {loading && touched ? (
             <div className="px-2 py-1.5 text-xs text-muted-foreground" role="status">{loadingLabel}</div>
@@ -525,8 +558,8 @@ export function ComboboxInput({
               ))}
             </div>
           )}
-        </div>
-      )}
-    </div>
+        </PopoverContent>
+      ) : null}
+    </Popover>
   )
 }

package/src/backend/inputs/__tests__/ComboboxInput.dialog.test.tsx

@@ -0,0 +1,134 @@
+/** @jest-environment jsdom */
+
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+}))
+
+import * as React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { Dialog, DialogContent, DialogTitle } from '../../../primitives/dialog'
+import { ComboboxInput } from '../ComboboxInput'
+
+function DialogHarness() {
+  const [open, setOpen] = React.useState(true)
+  const [value, setValue] = React.useState('')
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogTitle>Move inventory</DialogTitle>
+        <ComboboxInput
+          value={value}
+          onChange={setValue}
+          suggestions={[
+            { value: 'red', label: 'Red' },
+            { value: 'green', label: 'Green' },
+          ]}
+        />
+        <output data-testid="value">{value}</output>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function openSuggestions() {
+  const input = screen.getByRole('combobox')
+  fireEvent.focus(input)
+  fireEvent.change(input, { target: { value: 'gre' } })
+  return input
+}
+
+describe('ComboboxInput inside a Dialog', () => {
+  it('renders the suggestion list outside the dialog scroll container', () => {
+    render(<DialogHarness />)
+    openSuggestions()
+
+    const dialogContent = document.querySelector('[data-dialog-content]')
+    const listbox = screen.getByRole('listbox')
+
+    expect(dialogContent).not.toBeNull()
+    expect(dialogContent!.contains(listbox)).toBe(false)
+  })
+
+  // `react-remove-scroll` (the dialog's scroll lock) listens on the document for
+  // both `wheel` and `touchmove` and cancels either one when it is raised outside
+  // the dialog content, which would freeze the portaled list.
+  it.each(['wheel', 'touchMove'] as const)('keeps %s events off the dialog scroll lock so a long list stays scrollable', (eventName) => {
+    render(<DialogHarness />)
+    openSuggestions()
+
+    const domEventName = eventName === 'wheel' ? 'wheel' : 'touchmove'
+    // The scroll lock reads coordinates off the event, so give it usable ones.
+    const init = eventName === 'wheel'
+      ? { deltaY: 120 }
+      : { touches: [{ clientX: 0, clientY: 0 }], changedTouches: [{ clientX: 0, clientY: 0 }] }
+    const onDocumentEvent = jest.fn()
+    document.addEventListener(domEventName, onDocumentEvent)
+    try {
+      fireEvent[eventName](screen.getByRole('listbox'), init)
+      expect(onDocumentEvent).not.toHaveBeenCalled()
+
+      // control: the same event anywhere else still reaches the document listener
+      fireEvent[eventName](screen.getByRole('combobox'), init)
+      expect(onDocumentEvent).toHaveBeenCalledTimes(1)
+    } finally {
+      document.removeEventListener(domEventName, onDocumentEvent)
+    }
+  })
+
+  it('does not add a second dialog node while the suggestions are open', () => {
+    render(<DialogHarness />)
+    openSuggestions()
+
+    // Radix hardcodes role="dialog" on popover content; ~35 test files resolve
+    // `getByRole('dialog')`, which is strict about multiple matches.
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+    expect(document.querySelectorAll('[role="dialog"]')).toHaveLength(1)
+    expect(screen.getByRole('dialog')).toHaveAttribute('data-dialog-content')
+  })
+
+  it('keeps the dialog open when an option is picked', async () => {
+    render(<DialogHarness />)
+    openSuggestions()
+
+    // Radix registers its outside-interaction listener on a macrotask, so let it
+    // land before simulating the pointer sequence a real click produces.
+    await act(async () => {
+      await Promise.resolve()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+    })
+
+    const option = screen.getByRole('option', { name: /green/i })
+    fireEvent.pointerDown(option, { bubbles: true })
+    fireEvent.mouseDown(option, { bubbles: true })
+    fireEvent.click(option)
+
+    expect(screen.getByTestId('value')).toHaveTextContent('green')
+    expect(document.querySelector('[data-dialog-content]')).not.toBeNull()
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+  })
+
+  it('still dismisses the dialog on a genuinely outside pointer down', async () => {
+    render(<DialogHarness />)
+    openSuggestions()
+
+    await act(async () => {
+      await Promise.resolve()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+    })
+
+    // Control for the case above: the suppression must be scoped to the portaled
+    // list, not a blanket block on the dialog's outside-interaction handling.
+    const outside = document.createElement('button')
+    document.body.appendChild(outside)
+    try {
+      await act(async () => {
+        fireEvent.pointerDown(outside, { bubbles: true })
+        fireEvent.mouseDown(outside, { bubbles: true })
+        fireEvent.click(outside)
+      })
+      expect(document.querySelector('[data-dialog-content]')).toBeNull()
+    } finally {
+      outside.remove()
+    }
+  })
+})

package/src/backend/inputs/__tests__/ComboboxInput.test.tsx

@@ -557,5 +557,100 @@ describe('ComboboxInput accessibility', () => {
     const listbox = screen.getByRole('listbox')
     expect(within(listbox).getAllByRole('option')).toHaveLength(2)
     expect(input).toHaveAttribute('aria-controls', listbox.id)
+    // The listbox is portaled out of the input's subtree, so aria-activedescendant
+    // is only valid while aria-owns makes it a logical descendant.
+    expect(input).toHaveAttribute('aria-owns', listbox.id)
+    expect(listbox.contains(input)).toBe(false)
+  })
+})
+
+describe('ComboboxInput suggestion popup placement', () => {
+  it('renders the suggestion list outside the field wrapper so an overflow ancestor cannot clip it', () => {
+    const { container } = render(<Harness />)
+    const input = getInput(container)
+
+    fireEvent.focus(input)
+    fireEvent.change(input, { target: { value: 're' } })
+
+    const listbox = screen.getByRole('listbox')
+    expect(container.contains(listbox)).toBe(false)
+    expect(document.body.contains(listbox)).toBe(true)
+  })
+
+  it('keeps focus on the input while the popup is open', () => {
+    const { container } = render(<Harness />)
+    const input = getInput(container)
+
+    act(() => {
+      input.focus()
+      fireEvent.focus(input)
+    })
+    fireEvent.change(input, { target: { value: 're' } })
+
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+    expect(document.activeElement).toBe(input)
+  })
+
+  it('selects a portaled option by click', () => {
+    render(<Harness />)
+    const input = screen.getByRole('combobox')
+
+    fireEvent.focus(input)
+    fireEvent.change(input, { target: { value: 'gre' } })
+    fireEvent.click(screen.getByRole('option', { name: /green/i }))
+
+    expect(screen.getByTestId('value')).toHaveTextContent('green')
+  })
+
+  it('selects a portaled option by keyboard', () => {
+    render(<Harness />)
+    const input = screen.getByRole('combobox')
+
+    fireEvent.focus(input)
+    fireEvent.change(input, { target: { value: 'gre' } })
+    fireEvent.keyDown(input, { key: 'ArrowDown' })
+    fireEvent.keyDown(input, { key: 'Enter' })
+
+    expect(screen.getByTestId('value')).toHaveTextContent('green')
+  })
+
+  it('closes the popup on Escape without letting the key reach an enclosing surface', () => {
+    const onSurfaceKeyDown = jest.fn()
+    render(
+      <div onKeyDown={onSurfaceKeyDown}>
+        <Harness />
+      </div>,
+    )
+    const input = screen.getByRole('combobox')
+
+    fireEvent.focus(input)
+    fireEvent.change(input, { target: { value: 're' } })
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+
+    fireEvent.keyDown(input, { key: 'Escape' })
+
+    expect(screen.queryByRole('listbox')).toBeNull()
+    expect(onSurfaceKeyDown).not.toHaveBeenCalled()
+  })
+
+  it('removes the popup from the document once it closes', () => {
+    jest.useFakeTimers()
+    try {
+      render(<Harness />)
+      const input = screen.getByRole('combobox')
+
+      fireEvent.focus(input)
+      fireEvent.change(input, { target: { value: 're' } })
+      expect(document.body.querySelector('[role="listbox"]')).not.toBeNull()
+
+      blurAndFlush(input)
+
+      expect(document.body.querySelector('[role="listbox"]')).toBeNull()
+    } finally {
+      act(() => {
+        jest.runOnlyPendingTimers()
+      })
+      jest.useRealTimers()
+    }
   })
 })

package/src/primitives/__tests__/zindex-overlay.test.tsx

@@ -87,8 +87,11 @@ describe('Issue #1836: portaled overlay primitives sit above modals (z-popover >
       fireEvent.change(input!, { target: { value: 'a' } })
     })
 
-    const suggestions = container.querySelector('[class*="z-popover"]')
+    // The list is portaled to document.body (via the DS Popover) so a Dialog's
+    // overflow cannot clip it -- so look it up on the document, not on `container`.
+    const suggestions = document.body.querySelector('[class*="z-popover"]')
     expect(suggestions).not.toBeNull()
+    expect(container.contains(suggestions)).toBe(false)
     const token = findZIndexToken((suggestions as HTMLElement).className)
     expect(token).toBe('z-popover')
     expect(Z_INDEX_BY_TOKEN[token!]).toBeGreaterThan(Z_INDEX_BY_TOKEN['z-modal'])