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 <noreply@anthropic.com>
This commit is contained in:
2026-04-23 21:52:10 -04:00
parent 435586388e
commit 7df508d65e
+9
View File
@@ -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) {