[Unified Search] Change phrase(s) comboboxes to async patterns (#171427)

## Summary

This PR does NOT address
https://github.com/elastic/kibana/issues/158876, but helps reduce the
confusion/cognitive dissonance of the async search results only matching
on words from the start of the string, vs. `EuiComboBox` showing search
results from anywhere in the string by default.

Please see https://eui.elastic.co/#/forms/combo-box#async for more
documentation on async searching.

### Before

![image](https://user-images.githubusercontent.com/924948/270275373-0d0df8c3-3a03-40e9-bc79-ea353147e419.gif)

### After


![image](https://user-images.githubusercontent.com/549407/280421058-a7476a75-bfbe-49c6-be81-7bd0b46e048c.gif)

### Checklist

- ~[ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios~ No tests found
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
This commit is contained in:
Cee Chen 2023-11-20 10:01:56 -08:00 committed by GitHub
parent 8052f03f61
commit a723bd0cd7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 2 deletions

View file

@ -71,6 +71,7 @@ export class PhraseSuggestorUI<T extends PhraseSuggestorProps> extends React.Com
}
protected onSearchChange = (value: string | number | boolean) => {
this.setState({ isLoading: true });
this.updateSuggestions(`${value}`);
};

View file

@ -54,7 +54,7 @@ class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
}
private renderWithSuggestions() {
const { suggestions } = this.state;
const { suggestions, isLoading } = this.state;
const { value, intl, onChange, fullWidth } = this.props;
// there are cases when the value is a number, this would cause an exception
const valueAsStr = String(value);
@ -62,6 +62,8 @@ class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
return (
<div ref={this.comboBoxWrapperRef}>
<StringComboBox
async
isLoading={isLoading}
inputRef={(ref) => {
this.inputRef = ref;
}}

View file

@ -31,13 +31,15 @@ class PhrasesValuesInputUI extends PhraseSuggestorUI<PhrasesValuesInputProps> {
comboBoxWrapperRef = React.createRef<HTMLDivElement>();
public render() {
const { suggestions } = this.state;
const { suggestions, isLoading } = this.state;
const { values, intl, onChange, fullWidth, onParamsUpdate, compressed, disabled } = this.props;
const options = values ? uniq([...values, ...suggestions]) : suggestions;
return (
<div ref={this.comboBoxWrapperRef}>
<StringComboBox
async
isLoading={isLoading}
fullWidth={fullWidth}
compressed={compressed}
placeholder={intl.formatMessage({