diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx index 8be1e4506a..c76432f2f4 100644 --- a/packages/select/src/components/query-list/queryList.tsx +++ b/packages/select/src/components/query-list/queryList.tsx @@ -136,7 +136,7 @@ export class QueryList extends React.Component, IQueryList this.setState({ activeItem: nextProps.activeItem }); } if (nextProps.query != null) { - this.setQuery(nextProps.query); + this.setQuery(nextProps.query, nextProps.resetOnQuery, nextProps); } } @@ -192,14 +192,14 @@ export class QueryList extends React.Component, 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 @@ -207,10 +207,10 @@ export class QueryList extends React.Component, IQueryList 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)); } } diff --git a/packages/select/test/queryListTests.tsx b/packages/select/test/queryListTests.tsx index b599184781..3a2b26855c 100644 --- a/packages/select/test/queryListTests.tsx +++ b/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("", () => { const FilmQueryList = QueryList.ofType(); @@ -104,6 +103,23 @@ describe("", () => { filmQueryList.setProps(props); assert.equal(testProps.onActiveItemChange.callCount, 0); }); + + it("ensure activeItem changes on query change", () => { + const props: IQueryListProps = { + ...testProps, + items: [TOP_100_FILMS[0]], + query: "abc", + }; + const filmQueryList: ReactWrapper, IQueryListState> = mount( + , + ); + 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", () => {