[select] fix(QueryList): trim whitespace when creating new items (#3832)

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

@@ -194,7 +194,7 @@ export class QueryList<T> extends AbstractComponent2<IQueryListProps<T>, IQueryL
             handleKeyDown: this.handleKeyDown,
             handleKeyUp: this.handleKeyUp,
             handlePaste: this.handlePaste,
-            handleQueryChange: this.handleQueryChange,
+            handleQueryChange: this.handleInputQueryChange,
             itemList: itemListRenderer({
                 ...spreadableState,
                 items,
@@ -278,9 +278,13 @@ export class QueryList<T> extends AbstractComponent2<IQueryListProps<T>, IQueryL
             Utils.safeInvoke(props.onQueryChange, query);
         }
 
-        const filteredItems = getFilteredItems(query, props);
+        // Leading and trailing whitespace can be confusing to display, so we remove it when passing it
+        // to functions dealing with data, like createNewItemFromQuery. But we need the unaltered user-typed
+        // query to remain in state to be able to render controlled text inputs properly.
+        const trimmedQuery = query.trim();
+        const filteredItems = getFilteredItems(trimmedQuery, props);
         const createNewItem =
-            createNewItemFromQuery != null && query !== "" ? createNewItemFromQuery(query) : undefined;
+            createNewItemFromQuery != null && trimmedQuery !== "" ? createNewItemFromQuery(trimmedQuery) : undefined;
         this.setState({ createNewItem, filteredItems, query });
 
         // always reset active item if it's now filtered or disabled
@@ -317,7 +321,9 @@ export class QueryList<T> extends AbstractComponent2<IQueryListProps<T>, IQueryL
         // omit noResults if createNewItemFromQuery and createNewItemRenderer are both supplied, and query is not empty
         const maybeNoResults = this.isCreateItemRendered() ? null : noResults;
         const menuContent = renderFilteredItems(listProps, maybeNoResults, initialContent);
-        const createItemView = this.isCreateItemRendered() ? this.renderCreateItemMenuItem(this.state.query) : null;
+        const createItemView = this.isCreateItemRendered()
+            ? this.renderCreateItemMenuItem(this.state.query.trim())
+            : null;
         if (menuContent == null && createItemView == null) {
             return null;
         }
@@ -483,7 +489,7 @@ export class QueryList<T> extends AbstractComponent2<IQueryListProps<T>, IQueryL
         Utils.safeInvoke(onKeyUp, event);
     };
 
-    private handleQueryChange = (event?: React.ChangeEvent<HTMLInputElement>) => {
+    private handleInputQueryChange = (event?: React.ChangeEvent<HTMLInputElement>) => {
         const query = event == null ? "" : event.target.value;
         this.setQuery(query);
         Utils.safeInvoke(this.props.onQueryChange, query, event);

packages/select/test/queryListTests.tsx

@@ -315,4 +315,33 @@ describe("<QueryList>", () => {
             assert.deepEqual(filmQueryList.state().query, "");
         });
     });
+
+    describe("query", () => {
+        it("trims leading and trailing whitespace when creating new items", () => {
+            let triggerInputQueryChange: ((e: any) => void) | undefined;
+            const createNewItemFromQuerySpy = sinon.spy();
+            const createNewItemRendererSpy = sinon.spy();
+            // we must supply our own renderer so that we can hook into IQueryListRendererProps#handleQueryChange
+            const renderer = sinon.spy((props: IQueryListRendererProps<IFilm>) => {
+                triggerInputQueryChange = props.handleQueryChange;
+                return <div>{props.itemList}</div>;
+            });
+            shallow(
+                <FilmQueryList
+                    {...testProps}
+                    renderer={renderer}
+                    createNewItemFromQuery={createNewItemFromQuerySpy}
+                    createNewItemRenderer={createNewItemRendererSpy}
+                />,
+            );
+
+            const untrimmedQuery = " foo ";
+            const trimmedQuery = untrimmedQuery.trim();
+
+            assert.isDefined(triggerInputQueryChange, "query list should render with input change callbacks");
+            triggerInputQueryChange!({ target: { value: untrimmedQuery } });
+            assert.isTrue(createNewItemFromQuerySpy.calledWith(trimmedQuery));
+            assert.isTrue(createNewItemRendererSpy.calledWith(trimmedQuery));
+        });
+    });
 });