Repository navigation
Leave the page where it was when a dashboard card opens - #102
Open
GabeBolton wants to merge 1 commit into
Open
GabeBolton wants to merge 1 commit into
GabeBolton wants to merge 1 commit into
Conversation
Every clickable name on the dashboard was an anchor with href="#". The click opened the detail card, but the browser also followed the link, and a link to "#" means the top of the page: with a feed long enough to scroll, the page jumped to the top before the card appeared. Closing the card then scrolled back down, because the browser restores focus to the element that was clicked. Measured on a page scrolled to 1557px, opening a card moved it to 2px and closing it returned to 1556px. The href was never doing any work. Opening the card is the anchor's n_clicks callback, and the pointer cursor comes from .dash-entity-link. Dropping it leaves the page still while the card is open and closed. The report templates' [🔗](#edit/<table>/<id>) links and Explore's Edit column are untouched: those name a record, and the hash route that opens the editor from them is unchanged. Nothing depended on the bare "#" resetting the hash either, since the editor clears its own route when it closes. Costs keyboard reachability for these names: an anchor without an href is not tabbable. They were only half usable from the keyboard before, since Enter on them triggered the same jump; making them buttons styled as links is the proper fix, and is left for its own change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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
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.
Clicking a name on the dashboard scrolled the page to the top before the detail card appeared, and closing the card scrolled back down — distracting now that the feed is long enough to scroll.
Every clickable name was an anchor with
href="#". The click opened the card, but the browser also followed the link, and a link to#means the top of the page. Closing it scrolled back because the browser restores focus to the element that was clicked.The href was never doing any work: opening the card is the anchor's
n_clickscallback, and the pointer cursor comes from.dash-entity-link. This drops it.Verified in a browser
Driven with Playwright against the seeded live server, on a page scrolled to 1557px:
The regression test added here fails on the old code and passes on the new. Full suite: 377 passed.
Not affected
[🔗](#edit/<table>/<id>)links and Explore's Edit column name a record, and the hash route that opens the editor from them is unchanged.#resetting the hash: the editor clears its own route when it closes, and opening the same record twice in a row still works.Known costs
/#edit/initiatives/1, loses the hash during page load and never opens the editor. That is how a link copied out of a report arrives, so report links pasted elsewhere will not work even once they carry the full site address. Being handled separately.🤖 Generated with Claude Code