[Feature] Combobox: animate the popover open and close

[tvq]

The Combobox popover opened and closed in a hard cut. It now animates in and out like the other overlays.

What changed

• ComboboxPopover gets the data-state enter/exit classes from [Bug Fix] Overlays: play the exit animation before hiding #506, duration-100 and the data-side slide-in — parity with shadcn/ui's Combobox.
• The popover becomes popover="manual". A native auto popover's light dismiss hides it directly and the hide beforetoggle is not cancelable, so no exit could ever play. The controller now owns every close path (trigger, outside click, Escape, radio selection) through closePopover(), which waits for the exit animation before hidePopover() — the [Bug Fix] Overlays: play the exit animation before hiding #506 block, copied unchanged. Positioning keeps running until the popover is hidden, so it does not drift while fading.
• Escape works with focus anywhere (before: only inside the popover). Outside click and Escape are window actions on the root, guarded for a Combobox rendered without a popover.
• Dropped role="popover" (not an ARIA role). API and examples unchanged.

Tested

• cd gem && bundle exec rake
• Headless Chrome over the docs examples (single + multiple): open/close via trigger, outside click, Escape (trigger / search input / body), radio selection, reopen mid-exit, close mid-open, positioning during the fade, flip → data-side=top, keyboard navigation and filtering.

Dialog and AlertDialog get their exit animations in sibling PRs.

🤖 Generated with Claude Code

---

Summary by cubic

Animates the Combobox popover open and close instead of a hard cut. The controller now owns every close path (trigger, outside click, Escape, radio selection) and waits for the exit animation before hiding the popover.

New Features

• Switches to popover="manual" so a single close path can wait for the exit animation.
• Adds data-state enter/exit classes, duration-100, and data-side slide-in for parity with shadcn/ui.
• Keeps positioning running until the popover is hidden, so it doesn't drift during the fade.
• Removes the non-ARIA role="popover" and adds window-level outside-click and Escape handlers, guarded for comboboxes without a popover.

^{Written for commit 2b26f6b. Summary will update on new commits.}

[cubic-dev-ai]

1 issue found and verified against the latest diff

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="gem/lib/ruby_ui/combobox/combobox_controller.js">

<violation number="1" location="gem/lib/ruby_ui/combobox/combobox_controller.js:259">
P3: The `computePosition().then` callback here makes unconditional async writes to `this.popoverTarget` — including the newly added `dataset.side` — with no `isConnected`/run guard. The sibling popover_controller.js (source of this pattern) guards with `if (!content.isConnected) return;` and run-bound teardown precisely so a stale or detached run cannot overwrite position or write to a removed node. Add an `isConnected` check before writing, and consider using the same run-scoped teardown.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[cubic-dev-ai]

P3: The computePosition().then callback here makes unconditional async writes to this.popoverTarget — including the newly added dataset.side — with no isConnected/run guard. The sibling popover_controller.js (source of this pattern) guards with if (!content.isConnected) return; and run-bound teardown precisely so a stale or detached run cannot overwrite position or write to a removed node. Add an isConnected check before writing, and consider using the same run-scoped teardown.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At gem/lib/ruby_ui/combobox/combobox_controller.js, line 259:

<comment>The `computePosition().then` callback here makes unconditional async writes to `this.popoverTarget` — including the newly added `dataset.side` — with no `isConnected`/run guard. The sibling popover_controller.js (source of this pattern) guards with `if (!content.isConnected) return;` and run-bound teardown precisely so a stale or detached run cannot overwrite position or write to a removed node. Add an `isConnected` check before writing, and consider using the same run-scoped teardown.</comment>

<file context>
@@ -174,19 +244,30 @@ export default class extends Controller {
           top: `${y}px`,
         });
+        // flip() can resolve to the opposite side, so the slide-in direction follows the resolved value.
+        this.popoverTarget.dataset.side = placement.split("-")[0]
       });
     });
</file context>

[tvq]

Accurate as a description of the code, but I'd keep it out of this PR.

• The unguarded .then predates this branch. The diff adds dataset.side (the same line HoverCard and ContextMenu write, also unguarded) and stopAutoUpdate() on entry, which closes a leak on main where every open stacked another autoUpdate run and only disconnect() released the last one.
• The callback resolves this.popoverTarget fresh on every run, so a popover swapped by a morph gets positioned instead of the stale node. The remaining failure needs the popover to be removed while open, at which point the callback throws on scroll/resize until the controller disconnects. Same behaviour on main, and shared by Select, DropdownMenu, HoverCard and ContextMenu.
• On disconnect() the run is stopped and an in-flight computePosition writes into the detached subtree, which is harmless.
• Popover is the only controller with the run-scoped guard ([Bug Fix] Popover: set data-state/data-side, clear closeTimeout on disconnect, close on Escape #495). Porting it into one of the five other positioning callbacks adds a second variant rather than parity.

Hardening all five autoUpdate callbacks together is a follow-up I'm happy to open.