diff --git a/packages/docs-app/src/examples/select-examples/selectExample.tsx b/packages/docs-app/src/examples/select-examples/selectExample.tsx index cd87bb9c05..352723b0f4 100644 --- a/packages/docs-app/src/examples/select-examples/selectExample.tsx +++ b/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 + { @@ -27,12 +28,14 @@ export class SuggestExample extends React.PureComponent + extends IProps { */ onQueryChange?: (query: string, event?: React.ChangeEvent) => 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 diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx index 988228795e..2199d4fd50 100644 --- a/packages/select/src/components/query-list/queryList.tsx +++ b/packages/select/src/components/query-list/queryList.tsx @@ -78,6 +78,10 @@ export interface IQueryListState { export class QueryList extends React.Component, IQueryListState> { public static displayName = `${DISPLAYNAME_PREFIX}.QueryList`; + public static defaultProps = { + resetOnQuery: true, + }; + public static ofType() { return QueryList as new (props: IQueryListProps) => QueryList; } @@ -182,8 +186,7 @@ export class QueryList extends React.Component, 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); } diff --git a/packages/select/test/selectComponentSuite.tsx b/packages/select/test/selectComponentSuite.tsx index 089d19476e..1bfac6ace8 100644 --- a/packages/select/test/selectComponentSuite.tsx +++ b/packages/select/test/selectComponentSuite.tsx @@ -36,7 +36,7 @@ export function selectComponentSuite

, 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

, 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

, 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", () => {