ReviewOS

also looking at this

stacks/analyticshq

fix(dashboard): close the date picker on a click outside it

#56
Merged glennmichael123 wants to merge fix/date-picker-dismiss into main
3 files +25 -0
9 days ago

Follow-up to #55. A native <details> only closes from its own summary, so once the reporting-period picker was open, a click elsewhere on the page left it hanging open. Picking a day or a preset already closed it (both navigate()), but an idle open panel didn't dismiss.

Fix

A transparent full-viewport backdrop renders behind the panel while it's open — position: fixed; inset: 0; z-index: 39, below the panel (z-index: 40) and above the sticky nav (z-index: 30). A click on it closes the <details> and clears any half-made day selection. The handler uses only element methods (closest('details'), removeAttribute('open')), the same ones the existing Escape handler uses, so the component still touches no window/document/location and stx's DOM guard stays quiet.

I considered stx's useClickOutside composable, but it wraps a document click listener, no app uses it yet, and useRef's own source documents past hydration-breaking edge cases — the backdrop is the overlay pattern already used elsewhere in the app (.dz-overlay) and adds no new runtime surface.

Verified with a real pointer click

On a served harness (the authenticated dashboard still can't be driven standalone): open the panel, real left-click on the empty page outside it → the panel closes; clicking a day still starts a selection; clicking a preset still navigates. tests/unit/date-range-picker.test.ts gains a case pinning the backdrop element, the pickClose handler, and its stacking (fixed / inset 0 / z-index 39). 16/16 pass, pickier clean.

3 changed files on the files tab, with 0 review threads.

Sign in to comment on this pull request.