Close floating dropdowns when clicking outside them - #911
Merged
Conversation
A native <details> stays open until its own summary is clicked again, so the docs "versions" picker — and the downloads "+N more" and blog topic filter, which share the pattern — hung over the page after the reader moved on. The only way to dismiss one was to find its summary again. Close them on an outside click and on Escape, and let opening one close the others so only a single panel is ever up. Clicking inside an open panel keeps it open, so the version links stay reachable. Scoped by class to the three floating dropdowns. .dl-archived is deliberately excluded: it is an inline accordion rather than a floating panel, and should stay where the reader put it. Wired through a new layouts/partials/hooks/body-end.html, which overrides the theme's own hook — called from its scripts.html, which every one of our baseof templates already loads. That covers docs, downloads, blog and zh from one file and leaves the theme unforked, the same way hooks/head-end.html carries the SEO partials. The theme's body-end only holds an Algolia docsearch placeholder, kept verbatim so the override loses nothing. Verified by driving a real browser against a local build: opening works, an outside click closes, opening a second closes the first, Escape closes all, and a click inside the panel leaves it open. Confirmed on all three dropdown kinds, and confirmed .dl-archived still stays open.
✅ Deploy Preview for skywalking-website-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The docs versions picker stayed open after you clicked elsewhere on the page — the only way to dismiss it was to find its
summaryagain and click that.The cause is plain
<details>behaviour: a native<details>stays open until its own summary is toggled, and nothing on the site was closing it. The same pattern is used by two other dropdowns, so all three had the bug:details.docs-verdetails.dl-moredetails.topic-filterBehaviour now
details.dl-archivedis deliberately not included — it is an inline accordion on the downloads page rather than a floating panel, and should stay where the reader put it.Where it is wired
A new
layouts/partials/hooks/body-end.html, overriding the theme's hook of the same name. That hook is called from the theme'sscripts.html, which every one of ourbaseoftemplates already loads — so one file covers docs, downloads, blog and zh, and the theme stays unforked. It is the same approachhooks/head-end.htmluses to carry the SEO partials.The theme's own
body-end.htmlholds nothing but an Algolia docsearch placeholder, which is kept verbatim in the override so nothing is lost.Verification
Driven in a real browser against a local build, not just read:
Repeated across all three dropdown kinds, and confirmed
.dl-archivedstill stays open after an outside click:Also confirmed the script is emitted exactly once on each of
/docs/,/downloads/,/blog/and/zh/.