Skip to content

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

Merged
pringelmann merged 3 commits into
masterfrom
feat/search-combobox-shell
Jul 9, 2026
Merged

feat(core): header-anchored combobox shell for unified search#61849
pringelmann merged 3 commits into
masterfrom
feat/search-combobox-shell

Conversation

@pringelmann

@pringelmann pringelmann commented Jul 6, 2026

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.

-> Preview link <-

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.

Checklist

  • Code is properly formatted
  • Sign-off message is added to all commits
  • Tests are included
  • Screenshots before/after for front-end changes (preview link)
  • 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)

@pringelmann pringelmann force-pushed the feat/search-combobox-shell branch from f3b2846 to aa0153e Compare July 6, 2026 15:46
@pringelmann pringelmann self-assigned this Jul 7, 2026
@pringelmann pringelmann force-pushed the feat/search-combobox-shell branch 2 times, most recently from ce8d891 to 2048ec0 Compare July 7, 2026 09:03
@pringelmann pringelmann added this to the Nextcloud 35 milestone Jul 7, 2026
Comment thread core/css/header.scss
@media (min-width: 512px) {
#body-user & {
#body-user &,
#body-settings & {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bugfix from subtask 1 PR

The settings page did not get the flex rule applied

* Implemented as a plain <input> rather than NcTextField/NcInputField: those
* assume a light form background and a floating label, which clashes with the
* themed header and the resting "button" look and would need heavy overrides of
* their internals. A custom input also lets us own the combobox semantics the

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not want to couple the search bar to lib internals. It is a prominent feature on every page so the risk of even a minor change to upstream lib breaking the search is high. Custom input is therefore warranted here imo. Happy to debate

@pringelmann pringelmann force-pushed the feat/search-combobox-shell branch 2 times, most recently from 75fc074 to 7eb222e Compare July 7, 2026 11:55
@pringelmann pringelmann added 3. to review Waiting for reviews design Design, UI, UX, etc. enhancement feature: search team: IDP Code maintained by 🪪 IDP team labels Jul 7, 2026
@pringelmann pringelmann marked this pull request as ready for review July 7, 2026 15:35
@pringelmann pringelmann requested a review from a team as a code owner July 7, 2026 15:35
@pringelmann pringelmann requested review from artonge, kra-mo, nfebe, skjnldsv, sorbaugh and susnux and removed request for a team July 7, 2026 15:35
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
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 7eb222e to a357887 Compare July 9, 2026 11:22

@kra-mo kra-mo left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems to work well, cool :)

@pringelmann pringelmann merged commit 9f654c7 into master Jul 9, 2026
201 of 203 checks passed
@pringelmann pringelmann deleted the feat/search-combobox-shell branch July 9, 2026 12:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review Waiting for reviews design Design, UI, UX, etc. enhancement feature: search team: IDP Code maintained by 🪪 IDP team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Combobox shell: header input + anchored results popover

3 participants