[Select] Add resetOnQuery prop

packages/docs-app/src/examples/select-examples/selectExample.tsx

@@ -19,6 +19,7 @@ export interface ISelectExampleState {
     hasInitialContent: boolean;
     minimal: boolean;
     resetOnClose: boolean;
+    resetOnQuery: boolean;
     resetOnSelect: boolean;
     disableItems: boolean;
     disabled: boolean;
@@ -33,6 +34,7 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
         hasInitialContent: false,
         minimal: false,
         resetOnClose: false,
+        resetOnQuery: true,
         resetOnSelect: false,
     };
 
@@ -42,6 +44,7 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
     private handleItemDisabledChange = this.handleSwitchChange("disableItems");
     private handleMinimalChange = this.handleSwitchChange("minimal");
     private handleResetOnCloseChange = this.handleSwitchChange("resetOnClose");
+    private handleResetOnQueryChange = this.handleSwitchChange("resetOnQuery");
     private handleResetOnSelectChange = this.handleSwitchChange("resetOnSelect");
 
     public render() {
@@ -87,6 +90,11 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
                     checked={this.state.resetOnClose}
                     onChange={this.handleResetOnCloseChange}
                 />
+                <Switch
+                    label="Reset on query"
+                    checked={this.state.resetOnQuery}
+                    onChange={this.handleResetOnQueryChange}
+                />
                 <Switch
                     label="Reset on select"
                     checked={this.state.resetOnSelect}

packages/docs-app/src/examples/select-examples/suggestExample.tsx

@@ -19,6 +19,7 @@ export interface ISuggestExampleState {
     minimal: boolean;
     openOnKeyDown: boolean;
     resetOnSelect: boolean;
+    resetOnQuery: boolean;
 }
 
 export class SuggestExample extends React.PureComponent<IExampleProps, ISuggestExampleState> {
@@ -27,12 +28,14 @@ export class SuggestExample extends React.PureComponent<IExampleProps, ISuggestE
         film: TOP_100_FILMS[0],
         minimal: true,
         openOnKeyDown: false,
+        resetOnQuery: true,
         resetOnSelect: false,
     };
 
     private handleCloseOnSelectChange = this.handleSwitchChange("closeOnSelect");
     private handleOpenOnKeyDownChange = this.handleSwitchChange("openOnKeyDown");
     private handleMinimalChange = this.handleSwitchChange("minimal");
+    private handleResetOnQueryChange = this.handleSwitchChange("resetOnQuery");
     private handleResetOnSelectChange = this.handleSwitchChange("resetOnSelect");
 
     public render() {
@@ -65,6 +68,11 @@ export class SuggestExample extends React.PureComponent<IExampleProps, ISuggestE
                     checked={this.state.openOnKeyDown}
                     onChange={this.handleOpenOnKeyDownChange}
                 />
+                <Switch
+                    label="Reset on query"
+                    checked={this.state.resetOnQuery}
+                    onChange={this.handleResetOnQueryChange}
+                />
                 <Switch
                     label="Reset on select"
                     checked={this.state.resetOnSelect}

packages/select/src/common/listItemsProps.ts

@@ -98,6 +98,13 @@ export interface IListItemsProps<T> extends IProps {
      */
     onQueryChange?: (query: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
 
+    /**
+     * Whether the active item should be reset to the first matching item every
+     * time the query changes.
+     * @default true
+     */
+    resetOnQuery?: boolean;
+
     /**
      * Whether the querying state should be reset to initial when an item is
      * selected (immediately before `onItemSelect` is invoked). The query will

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

@@ -78,6 +78,10 @@ export interface IQueryListState<T> {
 export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryListState<T>> {
     public static displayName = `${DISPLAYNAME_PREFIX}.QueryList`;
 
+    public static defaultProps = {
+        resetOnQuery: true,
+    };
+
     public static ofType<T>() {
         return QueryList as new (props: IQueryListProps<T>) => QueryList<T>;
     }
@@ -182,8 +186,7 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         }
     }
 
-    // TODO resetActiveItem = this.props.resetOnQuery
-    public setQuery(query: string, resetActiveItem = false) {
+    public setQuery(query: string, resetActiveItem = this.props.resetOnQuery) {
         if (query !== this.state.query) {
             Utils.safeInvoke(this.props.onQueryChange, query);
         }

packages/select/test/selectComponentSuite.tsx

@@ -36,7 +36,7 @@ export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
 
     describe("common behavior", () => {
         it("itemRenderer is called for each child", () => {
-            const wrapper = render(testProps);
+            const wrapper = render({ ...testProps, resetOnQuery: false });
             // each item is rendered once
             assert.equal(testProps.itemRenderer.callCount, 15);
             // only filtered items re-rendered
@@ -65,7 +65,7 @@ export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
         });
 
         it("clicking item resets state when resetOnSelect=true", () => {
-            const wrapper = render({ ...testProps, query: "19", resetOnSelect: true });
+            const wrapper = render({ ...testProps, query: "19", resetOnSelect: true, resetOnQuery: false });
             findItems(wrapper)
                 .at(3)
                 .simulate("click");
@@ -74,6 +74,28 @@ export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
             assert.deepEqual(ranks, [5, 1]);
             assert.strictEqual(testProps.onQueryChange.lastCall.args[0], "");
         });
+
+        it("querying does not reset active item when resetOnQuery=false", () => {
+            const wrapper = render({ ...testProps, query: "19", resetOnQuery: false });
+
+            assert.strictEqual(testProps.onActiveItemChange.lastCall, null);
+
+            // querying should not select any new active item
+            findInput(wrapper).simulate("change", { target: { value: "Forrest" } });
+
+            assert.strictEqual(testProps.onActiveItemChange.lastCall, null);
+        });
+
+        it("querying resets active item when resetOnQuery=true", () => {
+            const wrapper = render({ ...testProps, query: "19" });
+
+            assert.strictEqual(testProps.onActiveItemChange.lastCall, null);
+
+            // querying should select Forrest Gump
+            findInput(wrapper).simulate("change", { target: { value: "Forrest" } });
+
+            assert.strictEqual(testProps.onActiveItemChange.lastCall.args[0].title, "Forrest Gump");
+        });
     });
 
     describe("keyboard", () => {