From e9c23391fad78f3ef7bf979b5cd5ab1d5c9b38ba Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Thu, 17 Jan 2019 15:46:04 -0800 Subject: [PATCH 1/4] add Suggest resetOnClose prop a la Select --- .../select/src/components/select/suggest.tsx | 29 +++++++++++++++++-- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/packages/select/src/components/select/suggest.tsx b/packages/select/src/components/select/suggest.tsx index cc73872c88..15b1552bd9 100644 --- a/packages/select/src/components/select/suggest.tsx +++ b/packages/select/src/components/select/suggest.tsx @@ -59,6 +59,13 @@ export interface ISuggestProps extends IListItemsProps { /** Props to spread to `Popover`. Note that `content` cannot be changed. */ popoverProps?: Partial & object; + + /** + * Whether the active item should be reset to the first matching item _when + * the popover closes_. The query will also be reset to the empty string. + * @default false + */ + resetOnClose?: boolean; } export interface ISuggestState { @@ -69,10 +76,10 @@ export interface ISuggestState { export class Suggest extends React.PureComponent, ISuggestState> { public static displayName = `${DISPLAYNAME_PREFIX}.Suggest`; - // Note: can't use in static members, so this remains dynamically typed. - public static defaultProps = { + public static defaultProps: Partial> = { closeOnSelect: true, openOnKeyDown: false, + resetOnClose: false, }; public static ofType() { @@ -136,7 +143,10 @@ export class Suggest extends React.PureComponent, ISuggestSt // placeholder shows selected item while open. const inputPlaceholder = isOpen && selectedItemText ? selectedItemText : placeholder; // value shows query when open, and query remains when closed if nothing is selected. - const inputValue = isOpen ? listProps.query : selectedItemText || listProps.query; + // if resetOnClose is enabled, then hide query when not open. (see handlePopoverOpening) + const inputValue = isOpen + ? listProps.query + : selectedItemText || (this.props.resetOnClose ? "" : listProps.query); return ( extends React.PureComponent, ISuggestSt className={classNames(listProps.className, popoverProps.className)} onInteraction={this.handlePopoverInteraction} popoverClassName={classNames(Classes.SELECT_POPOVER, popoverProps.popoverClassName)} + onOpening={this.handlePopoverOpening} onOpened={this.handlePopoverOpened} > extends React.PureComponent, ISuggestSt Utils.safeInvoke(popoverProps.onInteraction, nextOpenState); }); + private handlePopoverOpening = (node: HTMLElement) => { + const { popoverProps = {}, resetOnClose } = this.props; + + // reset query before opening instead of when closing to prevent flash of unfiltered items. + // this is a limitation of the interactions between QueryList state and Popover transitions. + if (resetOnClose && this.queryList) { + this.queryList.setQuery("", true); + } + + Utils.safeInvoke(popoverProps.onOpening, node); + }; + private handlePopoverOpened = (node: HTMLElement) => { const { popoverProps = {} } = this.props; From 9e166eef1a93571ca9f2e09f4d2559cd286762bb Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Thu, 17 Jan 2019 15:52:14 -0800 Subject: [PATCH 2/4] add Suggest disabled prop --- packages/select/src/components/select/suggest.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/select/src/components/select/suggest.tsx b/packages/select/src/components/select/suggest.tsx index 15b1552bd9..91d0d7af4d 100644 --- a/packages/select/src/components/select/suggest.tsx +++ b/packages/select/src/components/select/suggest.tsx @@ -28,6 +28,9 @@ export interface ISuggestProps extends IListItemsProps { */ closeOnSelect?: boolean; + /** Whether the input field should be disabled. */ + disabled?: boolean; + /** * Props to spread to the query `InputGroup`. To control this input, use * `query` and `onQueryChange` instead of `inputProps.value` and @@ -108,7 +111,7 @@ export class Suggest extends React.PureComponent, ISuggestSt public render() { // omit props specific to this component, spread the rest. - const { inputProps, popoverProps, ...restProps } = this.props; + const { disabled, inputProps, popoverProps, ...restProps } = this.props; return ( extends React.PureComponent, ISuggestSt onOpened={this.handlePopoverOpened} >
From cf3e1d94e4d15e6d22d8a555775fa713cb6771ff Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Thu, 17 Jan 2019 15:54:48 -0800 Subject: [PATCH 3/4] add resetOnClose switch to example --- .../src/examples/select-examples/suggestExample.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/docs-app/src/examples/select-examples/suggestExample.tsx b/packages/docs-app/src/examples/select-examples/suggestExample.tsx index b35b5e35b9..1ac95c9984 100644 --- a/packages/docs-app/src/examples/select-examples/suggestExample.tsx +++ b/packages/docs-app/src/examples/select-examples/suggestExample.tsx @@ -18,8 +18,9 @@ export interface ISuggestExampleState { film: IFilm; minimal: boolean; openOnKeyDown: boolean; - resetOnSelect: boolean; + resetOnClose: boolean; resetOnQuery: boolean; + resetOnSelect: boolean; } export class SuggestExample extends React.PureComponent { @@ -28,6 +29,7 @@ export class SuggestExample extends React.PureComponent + Date: Thu, 17 Jan 2019 15:57:21 -0800 Subject: [PATCH 4/4] docs note --- packages/select/src/components/select/suggest.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/select/src/components/select/suggest.md b/packages/select/src/components/select/suggest.md index 369e157abb..9e9935e791 100644 --- a/packages/select/src/components/select/suggest.md +++ b/packages/select/src/components/select/suggest.md @@ -1,6 +1,9 @@ @# Suggest -`Suggest` behaves similarly to [`Select`](#select/select-component), except it renders a text input as the `Popover` target instead of arbitrary children. +`Suggest` behaves similarly to [`Select`](#select/select-component), except it +renders a text input as the `Popover` target instead of arbitrary children. This +text [`InputGroup`](#core/components/text-inputs.input-group) can be customized +using `inputProps`. @reactExample SuggestExample