Add an onBlur handler for the kuery bar. Only resubmit when input changes. (#61901)

justinkambic · justinkambic · commit a583dc171f0e · 2020-03-31T13:35:40.000-04:00
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/typeahead/index.js b/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/typeahead/index.js
@@ -27,6 +27,7 @@ export class Typeahead extends Component {
     index: null,
     value: '',
     inputIsPristine: true,
+    lastSubmitted: '',
   };
 
   static getDerivedStateFromProps(props, state) {
@@ -151,7 +152,10 @@ export class Typeahead extends Component {
   };
 
   onSubmit = () => {
-    this.props.onSubmit(this.state.value);
+    if (this.state.lastSubmitted !== this.state.value) {
+      this.props.onSubmit(this.state.value);
+      this.setState({ lastSubmitted: this.state.value });
+    }
     this.setState({ isSuggestionsVisible: false });
   };
 
@@ -177,6 +181,7 @@ export class Typeahead extends Component {
             value={this.state.value}
             onKeyDown={this.onKeyDown}
             onKeyUp={this.onKeyUp}
+            onBlur={this.onSubmit}
             onChange={this.onChangeInputValue}
             onClick={this.onClickInput}
             autoComplete="off"
