Skip to content

Commit ce13da9

Browse files
committed
docs(react-headless-components-preview): shorten manual-vs-auto nested comparison
1 parent 578d74f commit ce13da9

2 files changed

Lines changed: 9 additions & 21 deletions

File tree

packages/react-components/react-headless-components-preview/library/docs/popover-spec.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ This iteration ships **no built-in focus management**:
133133

134134
- **No auto-focus on open.** The browser handles focus naturally. Top-layer popovers (`popover="manual"`) leave focus on the trigger; consumers can call `.focus()` on the surface or a descendant if needed.
135135
- **No focus trap.** Tab / Shift+Tab follow the document's normal tab order. With a top-layer surface, focus may move to elements behind the surface — that's expected for a non-modal popover.
136-
- **No focus restore.** When the surface unmounts, focus stays wherever the dismissal interaction left it (typically the trigger after click / Escape; arbitrary after click-outside).
136+
- **Focus restore on Escape only.** When Escape is pressed inside the surface, focus moves back to the trigger (native `popover="manual"` does not restore focus, so the surface's Escape handler does it explicitly). All other dismissal paths (click-outside, scroll-outside, programmatic close) leave focus wherever the interaction left it.
137137
- **`disableAutoFocus`** is preserved on `PopoverProps` for API stability but is currently inert. It will become meaningful again together with the upcoming focus hook.
138138

139139
### Labeling

packages/react-components/react-headless-components-preview/stories/src/Popover/PopoverNestedManualDescription.md

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,12 @@ top-layer painter for the surface, not a state authority.
1919

2020
## How this differs from `Nested` (auto mode)
2121

22-
| Aspect | `Popover` (manual) | `PopoverAuto` (auto) |
23-
| --------------------- | ---------------------------------------------------- | ------------------------------------------------------------ |
24-
| Source of truth | React state | React state mirrored from browser `toggle` events |
25-
| Light dismiss | `useOnClickOutside`, `useOnScrollOutside`, React Esc | Browser-driven (Escape, click-outside, popover stack) |
26-
| Esc filter | `closest('[data-popover-surface]') === self` | Browser closes only the topmost popover in its stack |
27-
| Stack ancestry | DOM nesting + React click/Escape filters | DOM nesting (or `popovertarget` linkage) per HTML spec |
28-
| Multiple open peers | ✅ Allowed — any number of unrelated popovers open | ❌ Browser dismisses non-ancestor popovers when a peer opens |
29-
| `popover` attribute | `popover="manual"` | `popover="auto"` |
30-
| Hover / context modes | Fully supported (`openOnHover`, `openOnContext`) | Open paths still React-driven; close paths defer to browser |
31-
| Focus restoration | None built in | Browser restores focus to the invoker on dismiss |
32-
| Predictability | Behaviour is whatever React handlers say | Behaviour follows the HTML Popover spec across all browsers |
22+
`PopoverAuto` defers dismiss to the browser via `popover="auto"`, so Escape,
23+
click-outside, and the popover-stack peer-dismissal happen at HTML-spec
24+
timing and focus is restored to the invoker for free. The trade-off is
25+
that the browser only allows one root chain open at a time — opening an
26+
unrelated peer dismisses the existing root.
3327

34-
**When to pick which:**
35-
36-
- Reach for `PopoverAuto` when the popover is a single, modal-ish surface and
37-
you want the browser's dismiss timing, focus restoration, and stack
38-
semantics for free.
39-
- Reach for `Popover` when you need multiple unrelated popovers open at once,
40-
hover/context-driven open with custom dismiss timing
41-
(`mouseLeaveDelay`, `closeOnScroll`), or precise control over which event
42-
closes which surface.
28+
Use `PopoverAuto` when you want native, single-root behaviour. Use
29+
`Popover` when you need multiple unrelated popovers open simultaneously
30+
or hover/context-driven open with custom dismiss timing.

0 commit comments

Comments
 (0)