Skip to content

Add fuzzy matching option to combobox #38018

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.

Sign up for GitHub

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

Jump to bottom
Closed
wants to merge 1 commit into from
Closed

Add fuzzy matching option to combobox #38018

wants to merge 1 commit into from

Conversation

@lsl
Copy link
Contributor

@lsl lsl commented Jan 17, 2022 •
edited
Loading

WIP:
I've got the functionality mostly where I want it after an earlier attempt in https://github.com/lsl/gutenberg/commit/2e9e4bf7e673ca16749c32a277c6a5df3dc23d26 but could use some more eyes on and the way things have just been bolted on isn't ideal.

Todo:

  • Needs some code comments to explain what I'm doing.
  • Refactor, or:
  • Contemplate moving all of this to a FuzzyboxControl and drop usage of the SuggestionList (roll it all into one where we can mange / ensure the highlight method matches the fuzzy match method in approach.
  • Some tests would help, there are a lot of edge cases here.

Description

  • Adds a fuzzyMatch option to the ComboboxControl component.
  • Adds storybook example with surrogate pairs and zero width joins.
  • Adds runes dependency to search and highlight surrogate pairs in a way that makes sense (Maybe? 🤞 ) (I would appreciate a review from a native speaker of something with diacritical / surrogate pairs in their language.)

The fuzzy search algo is derived from @bevacqua's fuzzysearch, I couldn't use it as a direct dependency due to suggestion highlighting requiring the search algo matches behavior.

How has this been tested?

Manual testing using storybook

npm run storybook:dev

Screenshots

fuzzymatchcombo.mp4

Types of changes

  • New feature (non-breaking change which adds functionality)
  • Non breaking refactor of existing component (output remains the same)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
  • I've updated related schemas if appropriate.

@lsl
Copy link
Contributor Author

lsl commented Jan 17, 2022

@bevacqua (or anyone else that knows better) do I need to include the MIT license here in some way?

@ciampo
Copy link
Contributor

ciampo commented Jan 24, 2022

cc'ing @diegohaz for his experience with combo box — what do you think of this implementation? What's the status of ariakit's combobox, and will it offer a comparable fuzzy search functionality?

also cc'ing @youknowriad in case we have this piece of functionality anywhere else in Gutenberg already

@ciampo ciampo added [Feature] Component System WordPress component system [Package] Components /packages/components labels Jan 24, 2022
@diegohaz
Copy link
Member

diegohaz commented Jan 24, 2022 •
edited
Loading

cc'ing @diegohaz for his experience with combo box — what do you think of this implementation? What's the status of ariakit's combobox, and will it offer a comparable fuzzy search functionality?

This looks really cool! There probably won't be a built-in fuzzy search functionality on the Ariakit Combobox component, but it's pretty easy to customize it. Here's an example using the isFuzzyMatch and renderFuzzyMatchText functions that @lsl wrote in this PR: https://codesandbox.io/s/ariakit-combobox-fuzzy-search-zyl0k?file=/src/combobox-matches.tsx

The Combobox component is pretty stable in terms of functionality, but the API may change until the final release, which I'm expecting to release mid-2022.

@ciampo
Copy link
Contributor

ciampo commented Jan 25, 2022

This looks really cool! There probably won't be a built-in fuzzy search functionality on the Ariakit Combobox component, but it's pretty easy to customize it.
The Combobox component is pretty stable in terms of functionality, but the API may change until the final release, which I'm expecting to release mid-2022.

This is great to hear — it means that we'll be able to apply the work being done in this PR also to the next version of ComboBox! Thank you for the insights, @diegohaz

@ciampo ciampo requested review from ciampo and mirka February 4, 2022 15:11
@Mamaduka
Copy link
Member

Mamaduka commented May 21, 2025

I'm doing some old PR cleanup. Since there has been no activity in the last three years, I'm going to close this as "stale."

Based on comments, the same functionality should be easier to implement when the Combobox component is refactored using Ariakit.

@Mamaduka Mamaduka closed this May 21, 2025
@lsl lsl deleted the update/combo-fuzzy-2 branch May 24, 2025 13:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mirka mirka Awaiting requested review from mirka

@ciampo ciampo Awaiting requested review from ciampo

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra will be requested when the pull request is marked ready for review ajitbohra is a code owner

Assignees

No one assigned

Labels

[Feature] Component System WordPress component system [Package] Components /packages/components

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@lsl @ciampo @diegohaz @Mamaduka