eui
eui copied to clipboard
[EuiComboBox] Custom matcher requested
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.
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.
i tried implementing It but got this as an error
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.
👋 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.
Bump - this is still valid.
👋 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.
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}
.
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.
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
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.