From 7df508d65e110ea29204b68b0f11603572e64174 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Thu, 23 Apr 2026 21:52:10 -0400 Subject: [PATCH] fix(modal): scroll highlighted autocomplete row into view on arrow keys selectAutocompleteItem (main tag input) and highlightFandomItem (fandom picker) call scrollIntoView({block:'nearest'}) on the newly-highlighted row. Previously arrowing past the visible slice would move the .selected class off-screen and leave the user with no visible feedback about where they were in the list. block:'nearest' is a no-op when the row is already visible, so in the common case (first few arrow presses) nothing scrolls. Only scrolls the minimum distance when the highlighted row has moved outside the container's viewport. Co-Authored-By: Claude Opus 4.7 --- app/static/js/view-modal.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/app/static/js/view-modal.js b/app/static/js/view-modal.js index 16b9ba1..c39d243 100644 --- a/app/static/js/view-modal.js +++ b/app/static/js/view-modal.js @@ -971,6 +971,12 @@ document.addEventListener('DOMContentLoaded', () => { el.classList.toggle('selected', i === index); }); autocompleteSelectedIndex = index; + // Keep the highlighted row in view as the user arrows past the + // visible slice. `block: 'nearest'` is a no-op when already visible, + // and scrolls the minimum distance otherwise. + if (index >= 0 && items[index]) { + items[index].scrollIntoView({ block: 'nearest', inline: 'nearest' }); + } } async function fetchAutocomplete(query) { @@ -1086,6 +1092,9 @@ document.addEventListener('DOMContentLoaded', () => { const items = fandomPickerAutocomplete.querySelectorAll('.tag-autocomplete-item'); items.forEach((el, i) => el.classList.toggle('selected', i === idx)); fandomPickerSelectedIdx = idx; + if (idx >= 0 && items[idx]) { + items[idx].scrollIntoView({ block: 'nearest', inline: 'nearest' }); + } } function pickFandomRow(row) {