larvit/plainpages
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Close the popup menus on an outside click, via the popover API #51

Merged
lilleman merged 4 commits from menu-outside-click into main 2026-08-05 08:31:47 +02:00
Conversation 0 Commits 4 Files Changed 15
+185 -61
lilleman commented 2026-08-05 01:38:13 +02:00
Owner
Copy Link
Copy Source

The language picker, profile menu and row kebabs were <details>, so they only closed by clicking the trigger again. They are now a <button popovertarget> plus a [popover] panel: the browser dismisses them on an outside click or Esc, opening one closes the others, and the panel sits in the top layer where a scrolling table can no longer clip it.

Placement is CSS anchor positioning. The panel needs position-anchor: auto — a bare anchor() resolves to nothing in Chromium, Firefox and WebKit alike, measured in all three before choosing.

data-table.ejs stopped hand-rolling its kebab and calls the menu partial, so the pattern lives in one file. <details> stays in the nav tree, where it means disclosure rather than popup. A browser older than the popover API renders the panels inline, so Sign out is never stranded behind an inert button.

The language picker, profile menu and row kebabs were `<details>`, so they only closed by clicking the trigger again. They are now a `<button popovertarget>` plus a `[popover]` panel: the browser dismisses them on an outside click or Esc, opening one closes the others, and the panel sits in the top layer where a scrolling table can no longer clip it. Placement is CSS anchor positioning. The panel needs `position-anchor: auto` — a bare `anchor()` resolves to nothing in Chromium, Firefox and WebKit alike, measured in all three before choosing. `data-table.ejs` stopped hand-rolling its kebab and calls the `menu` partial, so the pattern lives in one file. `<details>` stays in the nav tree, where it means disclosure rather than popup. A browser older than the popover API renders the panels inline, so Sign out is never stranded behind an inert button.
lilleman added 1 commit 2026-08-05 01:38:13 +02:00
Close the popup menus on an outside click, via the popover API
CI / full-gate (push) Successful in 2m40s
Details
5d9bdebf59
lilleman marked the pull request as work in progress 2026-08-05 01:38:26 +02:00
lilleman added 1 commit 2026-08-05 01:58:09 +02:00
Wrap each popover menu and give it a caller-named id
CI / full-gate (push) Successful in 2m43s
Details
cfeee10fa8
lilleman added 1 commit 2026-08-05 02:23:48 +02:00
Name the chrome's language menu and guard anchor positioning in the fallback
CI / full-gate (push) Successful in 2m44s
Details
9cf6c05325
lilleman marked the pull request as ready for review 2026-08-05 02:26:44 +02:00
lilleman added 1 commit 2026-08-05 08:28:36 +02:00
Merge branch 'main' into menu-outside-click
CI / full-gate (push) Successful in 2m41s
Details
Mirror / github-mirror (push) Successful in 6s
Details
1d4c7c88c4
lilleman merged commit 1d4c7c88c4 into main 2026-08-05 08:31:47 +02:00
lilleman deleted branch menu-outside-click 2026-08-05 08:31:47 +02:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claes.eismar.se lilleman (Lilleman auf Larv) martin.siden renovate-bot
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: larvit/plainpages#51
Delete Branch "menu-outside-click"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?