eui icon indicating copy to clipboard operation
eui copied to clipboard

[EuiComboBox] Custom matcher requested

Open flash1293 opened this issue 5 years ago • 8 comments

The combo box component matches items strictly by checking whether the typed string appears as a substring in the label of one of the options. In same cases it would be beneficial to overwrite this behavior with a custom matching function if that makes sense for the options shown in the combo box.

Example: Combo box with field names - here it would be nice to match by prefix per dot-separated part of the field name, typing r.b.by should match http.response.body.bytes. Especially for ECS like data with long field names and a lot of fields in a single index this makes selecting the right field much easier.

Another example (even though I don't have a specific use case for that) would be a fuzzy search which allows small typing errors like missing characters or swapped characters.

flash1293 avatar Aug 06 '19 08:08 flash1293

Makes sense to me. I think initially we can just allow for consumers to provide their own matching function. Fuzzy search would be a reasonable thing for EUI to eventually expose in something like the combo box, but rolling your own will likely get you what you want faster.

thompsongl avatar Aug 14 '19 19:08 thompsongl

i tried implementing It but got this as an error Screenshot 2020-03-25 at 4 27 55 PM

even when I used

options.filter(({ label }) => {
      return label.includes('a'); })

as a custom matcher, This might be because functions in JS are not same and hence ComponentDidUpdate gets repeatedly called.

anishagg17 avatar Mar 25 '20 10:03 anishagg17

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

github-actions[bot] avatar Mar 19 '21 08:03 github-actions[bot]

Bump - this is still valid.

flash1293 avatar Mar 19 '21 09:03 flash1293

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

github-actions[bot] avatar Sep 15 '21 16:09 github-actions[bot]

Currently there's a workaround. According to the source code, the built-in filter is turned off for async comboboxes. So you could just give the filtered options rather than all options to the EuiComboBox component and set async={true}.

balthild avatar Jan 07 '22 10:01 balthild

Due to the age of the issue we're closing this as not-planned. There is a valid workaround provided by @balthild. If additional functionality is required, please feel free to open an PR.

daveyholler avatar Mar 27 '23 17:03 daveyholler

Re-opening due to recent Kibana need (#7661)

Also note to self when working on this: we should add support to both EuiComboBox and EuiSelectable

cee-chen avatar Apr 15 '24 15:04 cee-chen

We've added a new optional optionMatcher prop in this PR. It will be available in the next version of EUI, which will be released later this week.

tkajtoch avatar Apr 29 '24 14:04 tkajtoch