feat: new search component - implement Combobox approach

[MengLinMaker]

Addresses:

closes #504
closes #224 - command palette can also be implemented with combobox
closes #262 - filter would be managed externally instead of internally
closes #261

Draft Search component implementation using Combobox underneath

This solution should be more maintainable than #501

• Component

  • Export some Combobox components as Search
  • SearchRoot to implement ComboBoxBase disabling defaultFilter as this is handled externally - eg: database
  • Add suggestion debouncer
  • Indicator for loading search query
  • No results found?
  • Remove extraneous components?

• Test

  • No results - cannot open dropdown with solid testing library
  • Debouncer

• Doc

  • Import, Features, Anatomy
  • Example: Emoji search
  • Usage: Debounce
  • Usage: Cmdk style
  • Usage: Chip query search?
  • API Reference
  • Rendered elements, Accessibility

• Bugs:

  • The dropdown bug: empty options -> typing -> non-empty options -> results in no dropdown unless dropdown is already open (Nani? ¯_(ツ)_/¯)
  • Selecting item triggers onInputChange, which should not trigger
  • Resets input on blur, which it shouldn't - add noResetInputOnBlur option to Combobox
  • Old dropdown options shown on blur - this is a combobox behaviour. WHY?

Note: I'm using minisearch npm package to perform text search

For the most part, this component is considered complete

[netlify]

✅ Deploy Preview for kobalte ready!

Name	Link
🔨 Latest commit	0444ccd
🔍 Latest deploy log	https://app.netlify.com/sites/kobalte/deploys/67279467af14d700084a5ba2
😎 Deploy Preview	https://deploy-preview-506--kobalte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 72 (🔴 down 11 from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 82 (no change from production) PWA: 60 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[MengLinMaker]

Solution

Cancel timeouts when onChange is triggered. (May introduce flickering momentarily to loading icon?)

Problem

Example search:

Screen.Recording.2024-10-29.at.8.38.00.am.mp4

Note: debouncer is triggered as emoji is selected (indicated by spinner), this should not happen.

[MengLinMaker]

Typing fast then stopping somehow does not display suggestion options:

Screen.Recording.2024-10-29.at.9.07.16.am.mp4

Issue seems to occur when:

• debounceOptionsMillisecond is over 100ms
• options was empty []

[MengLinMaker]

The dropdown bug - solution

Found the cause of the bug:

• The bug originates from Combobox.Input onInput function, which controls when to open the dropdown.
• When options is empty, so collection().getSize() = 0, context.open is not triggered.

The possible fix:

• allowsEmptyCollection should allow Combobox.Input onInput function to trigger context.open
• Internally context.open will open the dropdown when allowsEmptyCollection is set to true

[MengLinMaker]

@jer3m01 I think this component is ready for review

[MengLinMaker]

Fixed some dark mode styling issues:
https://deploy-preview-506--kobalte.netlify.app/docs/core/components/search/#cmdk-style

[jer3m01]

Thanks for all the work! Looks great!

Could you open separate issues for the bugs that are still present?

Will merge soon.