Skip to content

fix: scroll active query suggestion into view on keyboard nav - #37

Merged
pedrosousa13 merged 1 commit into
mainfrom
fix/query-suggest-keyboard-scroll
Jun 25, 2026
Merged

fix: scroll active query suggestion into view on keyboard nav#37
pedrosousa13 merged 1 commit into
mainfrom
fix/query-suggest-keyboard-scroll

Conversation

@pedrosousa13

Copy link
Copy Markdown
Owner

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 with replaceChildren() on every keystroke/arrow, which resets scrollTop to 0. The active item got the .jv-active highlight 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:

querySuggestList
  .querySelector(".jv-active")
  ?.scrollIntoView({ block: "nearest" });

Tests

  • New e2e regression (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.
  • Stub Element.prototype.scrollIntoView in the jsdom unit env (jsdom doesn't implement it), matching the existing matchMedia stub.

Verification: typecheck clean · 214 unit tests pass · 31 e2e pass.

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.
@pedrosousa13
pedrosousa13 merged commit 1beb35a into main Jun 25, 2026
2 checks passed
@pedrosousa13
pedrosousa13 deleted the fix/query-suggest-keyboard-scroll branch June 25, 2026 08:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant