Skip to content

feat(core): header-anchored combobox shell for unified search#61849

Draft
pringelmann wants to merge 2 commits into
masterfrom
feat/search-combobox-shell
Draft

feat(core): header-anchored combobox shell for unified search#61849
pringelmann wants to merge 2 commits into
masterfrom
feat/search-combobox-shell

Conversation

@pringelmann

Copy link
Copy Markdown
Contributor

Summary

Turns the header search into the a combobox shell. The header field is now a real combobox <input>: you type into directly, and results show in a popover anchored under it instead of a centred NcDialog. Mobile collapses to a button that opens a full-height panel with an NcTextField inside.

The popover opens on the first character and closes when cleared (Ctrl+F opens it empty). Focusing the empty field doesn't open the popover.

Not in this PR: the search orchestration bugs (result flashing, no request cancellation, "load more") go to subtask 5, and the full combobox keyboard/a11y model goes to subtask 6. The shell just wires the input to the existing search results.

Why custom, not NC components: #header is its own stacking context and NcModal teleports to body, so it can't sit below the in-header input while dimming the page (and it steals focus off the input). The input is a plain <input> because NcTextField assumes a light form background + floating label that clash with the themed header. focus-trap is already a dep and the panel reuses NcModal's exact styling so it still looks like a standard dialog. Mobile stays a plain searchbox on purpose.

TODO

  • Before/after screenshots (desktop + mobile)

Checklist

  • Code is properly formatted
  • Sign-off message is added to all commits
  • Tests are included
  • Screenshots before/after for front-end changes
  • Documentation has been updated or is not required
  • Labels added where applicable
  • Milestone added for target branch/version

AI

  • The content of this PR was partly generated using AI (mainly tests and fiddly CSS animation work)

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
@pringelmann pringelmann force-pushed the feat/search-combobox-shell branch from f3b2846 to aa0153e Compare July 6, 2026 15:46
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.

Combobox shell: header input + anchored results popover

1 participant