Add hacky workaround for getDerivedStateFromProps change in react 16.4

src/ui/public/query_bar/components/query_bar.tsx

@@ -84,10 +84,18 @@ interface State {
   index: number | null;
   suggestions: AutocompleteSuggestion[];
   suggestionLimit: number;
+  stateChanged: boolean;
 }
 
 export class QueryBar extends Component<Props, State> {
   public static getDerivedStateFromProps(nextProps: Props, prevState: State) {
+    if (prevState.stateChanged === true) {
+      return {
+        ...prevState,
+        stateChanged: false,
+      };
+    }
+
     if (nextProps.query.query !== prevState.query.query) {
       return {
         query: {
@@ -129,6 +137,7 @@ export class QueryBar extends Component<Props, State> {
     index: null,
     suggestions: [],
     suggestionLimit: 50,
+    stateChanged: false,
   };
 
   public updateSuggestions = debounce(async () => {
@@ -143,6 +152,37 @@ export class QueryBar extends Component<Props, State> {
   private componentIsUnmounting = false;
   private persistedLog: PersistedLog | null = null;
 
+  /*
+    This is a really nasty hack required because React "fixed" getDerivedStateFromProps in version 16.4 [1].
+    We were relying on the fact that getDerivedStateFromProps was only called on prop change. The
+    reasons for this are outlined in the other comment above about avoiding triggering angular
+    digest cycles. I intentionally chose not to implement React's "Preferred Solution"[2] because it
+    would once again involve triggering angular digest cycles on every keypress. We can remove this hack
+    once this component is no longer used in Angular.
+
+    [1]: https://reactjs.org/blog/2018/05/23/react-v-16-4.html#bugfix-for-getderivedstatefromprops
+    [2]: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component
+  */
+  public setState = <K extends keyof State>(
+    updater:
+      | ((prevState: Readonly<State>, props: Props) => Pick<State, K> | State)
+      | (Pick<State, K> | State),
+    callback?: () => void
+  ) => {
+    if (typeof updater === 'function') {
+      return super.setState(
+        // TypeScript doesn't handle spread operators on generics well https://github.com/Microsoft/TypeScript/issues/13557
+        // @ts-ignore
+        (state, props) => ({ ...updater(state, props), stateChanged: true }),
+        callback
+      );
+    }
+    if (typeof updater === 'object') {
+      // @ts-ignore
+      return super.setState({ ...updater, stateChanged: true }, callback);
+    }
+  };
+
   public isDirty = () => {
     return this.state.query.query !== this.props.query.query;
   };