mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
[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  ### After  ### 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:
parent
8052f03f61
commit
a723bd0cd7
3 changed files with 7 additions and 2 deletions
|
@ -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}`);
|
||||
};
|
||||
|
||||
|
|
|
@ -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;
|
||||
}}
|
||||
|
|
|
@ -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({
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue