Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New component - Search #504

Closed
MengLinMaker opened this issue Oct 21, 2024 · 2 comments · Fixed by #506
Closed

New component - Search #504

MengLinMaker opened this issue Oct 21, 2024 · 2 comments · Fixed by #506

Comments

@MengLinMaker
Copy link
Contributor

Is your feature request related to a problem? Please describe.
Creating a Search focused component with autosuggest dropdown.
Essentially it's a combination of Combobox with NavigationMenu style keyboard navigation.

Describe the solution you'd like
Although this is similar to the feature bloated combobox, there are interaction differences:

  • Debouncing and throttling suggestions
  • Display loading state
  • Clear input
  • More complex portal navigation - like NavigationMenu

Here are some examples of that may look like:

I can think of 2 approaches to creating this component:

  1. Create from scratch with inspriation from Combobox and NavigationMenu
  2. Build on top of cmdk-solid

Describe alternatives you've considered

  • Combobox is feature bloated and too restrictive for some search type operations.
  • cmdk-solid is good UI-wise, but keyboard nav has some issues:
    • using tab stops keyboard navigation afterwards - maybe could make a PR here instead?
@MengLinMaker
Copy link
Contributor Author

Search component implemented in PR #506
Preview here: https://deploy-preview-506--kobalte.netlify.app/docs/core/components/search

Key points:

  • Inherits the features if combobox with search focused defaults
  • Debouncer and loading indicator
  • List navigation - since menu navigation is very uncommon
  • Search focused examples for different use cases

Potential additions:

  • There is no clear button added

@MengLinMaker
Copy link
Contributor Author

PR #506 currently merging

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 a pull request may close this issue.

1 participant