fix: scroll active query suggestion into view on keyboard nav - #37
Merged
Conversation
renderSuggest() rebuilds the dropdown with replaceChildren(), which resets scrollTop to 0. Arrowing past the visible window left the highlighted item stranded below the fold with no way to follow it. Scroll the active item into view after each rebuild. Add an e2e regression test (long suggestion list, arrow down past the fold) and stub Element.prototype.scrollIntoView in the jsdom unit env.
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.
Problem
In the JMESPath query panel, arrowing (↑/↓) through the autocomplete suggestions does not scroll the list. Once you move past the visible window (~9 items in the 220px dropdown), the highlighted item drops below the fold and you can't see where you are. Reproduces on any payload with many keys — e.g. a large Storyblok story.
Cause
renderSuggest()rebuilds the dropdown withreplaceChildren()on every keystroke/arrow, which resetsscrollTopto 0. The active item got the.jv-activehighlight but the list never scrolled to follow it.Mouse wheel and programmatic scroll always worked — this was specific to keyboard navigation.
Fix
After rebuilding the list, scroll the highlighted item into view:
Tests
e2e/query-suggest-scroll.spec.ts): 60-key payload, arrow down 25×, assert the highlight stays within the scroll window. Red before the fix, green after.Element.prototype.scrollIntoViewin the jsdom unit env (jsdom doesn't implement it), matching the existingmatchMediastub.Verification: typecheck clean · 214 unit tests pass · 31 e2e pass.