[select] fix(QueryList): re-render when controlled items change (#3776)

packages/core/src/common/utils/compareUtils.ts

@@ -41,6 +41,7 @@ export function arraysEqual(arrA: any[], arrB: any[], compare = (a: any, b: any)
 /**
  * Shallow comparison between objects. If `keys` is provided, just that subset
  * of keys will be compared; otherwise, all keys will be compared.
+ * @returns true if items are equal.
  */
 export function shallowCompareKeys<T extends object>(objA: T, objB: T, keys?: IKeyBlacklist<T> | IKeyWhitelist<T>) {
     // treat `null` and `undefined` as the same
@@ -65,6 +66,7 @@ export function shallowCompareKeys<T extends object>(objA: T, objB: T, keys?: IK
 /**
  * Deep comparison between objects. If `keys` is provided, just that subset of
  * keys will be compared; otherwise, all keys will be compared.
+ * @returns true if items are equal.
  */
 export function deepCompareKeys(objA: any, objB: any, keys?: Array<string | number | symbol>): boolean {
     if (objA === objB) {

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

@@ -16,7 +16,7 @@
 
 import * as React from "react";
 
-import { DISPLAYNAME_PREFIX, IProps, Keys, Menu, Utils } from "@blueprintjs/core";
+import { AbstractComponent2, DISPLAYNAME_PREFIX, IProps, Keys, Menu, Utils } from "@blueprintjs/core";
 import {
     executeItemsEqual,
     getActiveItem,
@@ -129,7 +129,7 @@ export interface IQueryListState<T> {
     query: string;
 }
 
-export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryListState<T>> {
+export class QueryList<T> extends AbstractComponent2<IQueryListProps<T>, IQueryListState<T>> {
     public static displayName = `${DISPLAYNAME_PREFIX}.QueryList`;
 
     public static defaultProps = {
@@ -169,8 +169,8 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
 
         this.state = {
             activeItem:
-                this.props.activeItem !== undefined
-                    ? this.props.activeItem
+                props.activeItem !== undefined
+                    ? props.activeItem
                     : getFirstEnabledItem(filteredItems, props.itemDisabled),
             createNewItem,
             filteredItems,
@@ -204,13 +204,11 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
             this.setState({ activeItem: this.props.activeItem });
         }
 
-        // new query
         if (this.props.query != null && this.props.query !== prevProps.query) {
+            // new query
             this.setQuery(this.props.query, this.props.resetOnQuery, this.props);
-        }
-        // same query, but items in the list changed
-        else if (
-            this.props.query != null &&
+        } else if (
+            // same query (or uncontrolled query), but items in the list changed
             !Utils.shallowCompareKeys(this.props, prevProps, {
                 include: ["items", "itemListPredicate", "itemPredicate"],
             })

packages/select/test/queryListTests.tsx

@@ -49,6 +49,15 @@ describe("<QueryList>", () => {
         testProps.renderer.resetHistory();
     });
 
+    describe("items", () => {
+        it("handles controlled changes to the whole items list", () => {
+            const wrapper = shallow(<FilmQueryList {...testProps} />);
+            const newItems = TOP_100_FILMS.slice(0, 1);
+            wrapper.setProps({ items: newItems });
+            assert.deepEqual(wrapper.state("filteredItems"), newItems);
+        });
+    });
+
     describe("itemListRenderer", () => {
         const itemListRenderer: ItemListRenderer<IFilm> = props => (
             <ul className="foo">{props.items.map(props.renderItem)}</ul>