Quick search keyboard selection doesn't highlight titles, skips Request to Add, and wraps

[zZebrahz]

What happened

Keyboard navigation in the web quick search dialog (Ctrl+K / Cmd+K) is hard to follow:

• Title rows never show the keyboard highlight. Arrow Down highlights people rows, but when the selection moves onto a title row nothing is highlighted. The selection is there (Enter opens that title), it just isn't visible. Mouse hover does highlight title rows.
• "Request to Add" rows can't be reached with the arrow keys. Arrow navigation covers only the library titles and people. The suggestion rows below them are skipped.
• The selection wraps. Arrow Down on the last row jumps back to the first, and Arrow Up on the first row jumps to the last. With title rows unhighlighted, this looks like the keyboard can't reach most results: after "tom hanks", the person row lights up, then nothing does, then the person row lights up again.

Steps to reproduce

1. On the web app, open the quick search dialog (Ctrl+K / Cmd+K).
2. Search "tom hanks", which shows a person followed by several titles.
3. Press Arrow Down repeatedly. Only the person row highlights, and the selection wraps back to it after the last title.
4. Search for a title not in the library so "Request to Add" rows appear, and press Arrow Down past the library results.

Expected behavior

• The selected row is highlighted for every result kind: titles, people, and Request to Add suggestions.
• Arrow keys reach every row shown in the dialog, including Request to Add suggestions, and Enter opens the selected one.
• The selection stops at the first and last rows instead of wrapping.

Silo version / commit

Server build 1012 · 19e81846

Deployment

Not recorded.

Clients affected

Web. The quick search dialog is web-only.

Relevant logs

None; this is client-side behavior with no server errors.

Technical notes

• web/src/components/GlobalSearch.tsx, GlobalSearchResultRow: the highlight class data-[selected]:bg-accent is on the outer wrapper div, but data-selected is set on the inner role="option" element, so the selector never matches. GlobalSearchPersonRow puts both on the same element, which is why people rows highlight. The wrapper came from feat(catalog): rework TV recents and poster playback #561 (d3e71fe80); before it, the class and attribute were on the same element. feat(search): show people in the quick search dialog #1601 made the gap visible by adding highlighted people rows next to titles.
• moveResultFocus wraps the index with %. Clamping to 0 and resultCount - 1 gives stop-at-the-ends behavior.
• resultKeys holds only titles and people. RequestToAddSection (dialog variant) renders plain links that aren't options in the listbox and don't take part in aria-activedescendant selection.
• The dialog's result IDs are unique for the "tom hanks" query, so the selection doesn't skip or stick on rows; the rows just aren't highlighted.

Validation reference

Found during validation of #1138 (Person / cast & crew browsing) after #1601 added people to the dialog. Non-blocking.

AI harness

Claude Code

AI tool(s)

Claude Code, GitHub CLI

AI model(s)

claude-opus-5-5

AI involvement

AI-drafted at the maintainer's direction. The maintainer found the behavior in the browser; the causes come from source review at 19e81846 and agent API checks of the dialog's title and people queries.

Independent or adversarial review

None.

Confirmations

• I reproduced this myself on a real deployment
• Any logs provided are raw apart from marked redactions and are not AI-summarized; if none were available, I said so above