Fix change activeItem when query changes on props for QueryList (#3180)

* Fix change activeItem when query changes on props for QueryList

* move willRecieveProps to componentDidUpdate

* put back

* fix import. VSCode - I ahte you

packages/select/src/components/query-list/queryList.tsx

@@ -136,7 +136,7 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
             this.setState({ activeItem: nextProps.activeItem });
         }
         if (nextProps.query != null) {
-            this.setQuery(nextProps.query);
+            this.setQuery(nextProps.query, nextProps.resetOnQuery, nextProps);
         }
     }
 
@@ -192,25 +192,25 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         }
     }
 
-    public setQuery(query: string, resetActiveItem = this.props.resetOnQuery) {
+    public setQuery(query: string, resetActiveItem = this.props.resetOnQuery, props = this.props) {
         this.shouldCheckActiveItemInViewport = true;
         const hasQueryChanged = query !== this.state.query;
         if (hasQueryChanged) {
-            Utils.safeInvoke(this.props.onQueryChange, query);
+            Utils.safeInvoke(props.onQueryChange, query);
         }
 
-        const filteredItems = getFilteredItems(query, this.props);
+        const filteredItems = getFilteredItems(query, props);
         this.setState({ filteredItems, query });
 
         // always reset active item if it's now filtered or disabled
         const activeIndex = this.getActiveIndex(filteredItems);
         const shouldUpdateActiveItem =
             resetActiveItem ||
             activeIndex < 0 ||
-            isItemDisabled(this.state.activeItem, activeIndex, this.props.itemDisabled);
+            isItemDisabled(this.state.activeItem, activeIndex, props.itemDisabled);
 
         if (hasQueryChanged && shouldUpdateActiveItem) {
-            this.setActiveItem(getFirstEnabledItem(filteredItems, this.props.itemDisabled));
+            this.setActiveItem(getFirstEnabledItem(filteredItems, props.itemDisabled));
         }
     }
 

packages/select/test/queryListTests.tsx

@@ -3,7 +3,6 @@
  *
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
-
 import { assert } from "chai";
 import { mount, ReactWrapper, shallow } from "enzyme";
 import * as React from "react";
@@ -12,7 +11,7 @@ import * as sinon from "sinon";
 // this is an awkward import across the monorepo, but we'd rather not introduce a cyclical dependency or create another package
 import { IQueryListProps } from "@blueprintjs/select";
 import { IFilm, renderFilm, TOP_100_FILMS } from "../../docs-app/src/examples/select-examples/films";
-import { IQueryListRendererProps, ItemListPredicate, ItemListRenderer, QueryList } from "../src/index";
+import { IQueryListRendererProps, IQueryListState, ItemListPredicate, ItemListRenderer, QueryList } from "../src/index";
 
 describe("<QueryList>", () => {
     const FilmQueryList = QueryList.ofType<IFilm>();
@@ -104,6 +103,23 @@ describe("<QueryList>", () => {
             filmQueryList.setProps(props);
             assert.equal(testProps.onActiveItemChange.callCount, 0);
         });
+
+        it("ensure activeItem changes on query change", () => {
+            const props: IQueryListProps<IFilm> = {
+                ...testProps,
+                items: [TOP_100_FILMS[0]],
+                query: "abc",
+            };
+            const filmQueryList: ReactWrapper<IQueryListProps<IFilm>, IQueryListState<IFilm>> = mount(
+                <FilmQueryList {...props} />,
+            );
+            assert.deepEqual(filmQueryList.state().activeItem, TOP_100_FILMS[0]);
+            filmQueryList.setProps({
+                items: [TOP_100_FILMS[1]],
+                query: "123",
+            });
+            assert.deepEqual(filmQueryList.state().activeItem, TOP_100_FILMS[1]);
+        });
     });
 
     describe("scrolling", () => {