feat(CommandPalette): preserve group order in search results #5197
Conversation
commit: |
|
The CommandPalette component is powered by Fuse to provide the best matching results first which should stay the default. We should add a prop to change this behavior, something like |
That's a good point, and I didn't think about ordering groups by best matching result. Looking at the original code, though, I can see that Fuse results are only used to order items within groups but not the groups themselves. |
|
Yes it does, you can see this clearly by using the search on ui.nuxt.com! Groups are recomputed from fuse results: https://github.com/nuxt/ui/blob/v4/src/runtime/components/CommandPalette.vue#L287 |
Ismaele-silla
force-pushed
the
fix/preserve-command-palette-group-order
branch
from
76bee9a to
93b3e73
Compare
Ismaele-silla
changed the title
Ismaele-silla
force-pushed
the
fix/preserve-command-palette-group-order
branch
from
93b3e73 to
c64d037
Compare
Sorry, my bad. I took more time to read the code and now have a better understanding of what it does and how it works. A new prop, preserveGroupOrder, allows you to decide whether the order of groups defined in the props is preserved or not. PS: you can test the difference in the playground by searching for "Ad" in the command palette component |
2 participants
❓ Type of change
📚 Description
Adds an option to preserve the original order of groups in the CommandPalette component.
Currently, groups are always ordered by the top-scoring item within each group (based on Fuse search results). This change allows developers to keep their own predefined group order instead.
Motivation
Some applications require explicit control over how result groups are presented.
For example, on a content-driven website, you may want users to see their own content first, global content next, and other users’ content last. The current behavior forces all groups to be reordered by search relevance, which breaks this intended priority.
Implementation
preserveGroupOrder) to the CommandPalette component.📝 Checklist