[ComboBox] Provide a way to customize the matching logic

[dej611]

Is your feature request related to a problem? Please describe.
In Kibana filters are built iteratively via a composition of field criterias, where field values are shown with a ComboBox.
Everytime the user types a query is sent to ES in order to pre-filter the suggestions, where this query checks only for query matching from the beginning of each value, but for a very short time - the time of the request taking off - the user can see a partial matching for the existing suggestions but then those are replaced by the custom option message:

In this Kibana issue we're considering what to do specifically in this case, but I think nonetheless that giving the consumer the option to choose how to match before the async request takes off can be useful.

Describe the solution you'd like
I would be nice to have the option to choose between "match everywhere" or "match only from the beginning" strategy.

Describe alternatives you've considered
I've also inspected the option to prevent the request on local matching, but there's this other bug which is blocking that as well: #6638

[1Copenut]

Thank you for the suggestion @dej611. The EUI team will discuss this in our weekly grooming meeting on Monday.

[cee-chen]

@dej611 Would resolving #6638 unblock you on this issue? To be honest, I'm not totally sure I see a clear or meaningful way for consumers to control/configure this via prop.

Also just to check, is the above combobox in the screencap using the async prop? I believe if it is, that should prevent the brief flash of undesired search results.

[dej611]

@dej611 Would resolving #6638 unblock you on this issue?

Unfortunately it is not easy/performant to replicate the same logic applied within the Combobox leveraging Elasticsearch backend, so this fix is required as we are likely to enforce only a "match from the beginning" logic on the filter bar.

[cee-chen]

Alright, I pulled Kibana down locally to test out the async suggestion I made above, and it does work well (when combined with isLoading). You can check out the branch here: elastic/kibana@main...cee-chen:kibana:combobox-async-suggestions

Here is what the end UX looks like (essentially the flash of incorrect matches is replaced by a loading message instead):

While the load time doesn't necessarily feel great, this is (IMO) the more technically correct approach that we specifically demo in our docs, and also given that EuiComboBox does not know the full list of suggestions (if they're async) and could therefore also be suggesting incomplete items regardless of matching logic.

[cee-chen]

(whoops, disregard the deleted comment, I was on the wrong github tab 🤦 )

[cee-chen]

I'm going to close this as not planned. Based on the specific Kibana usage listed/linked from the PR description (elastic/kibana#158876), and the fact that options are being loaded from an external source (Elasticsearch), EuiComboBox should be using the async prop and not attempting to match options (since we don't have the full list) at all.

If anyone else out there has a synchronous (all options should be available to EuiComboBox at all times) usage for matching by the start of the string only, please feel free to leave a comment or open a new issue.