From eb67a33bb1d8ca0d77971414daba8d66fc0dc503 Mon Sep 17 00:00:00 2001 From: James Date: Mon, 3 Aug 2020 01:35:13 -0700 Subject: [PATCH 1/2] BasePicker's onDismiss can now return a boolean to decide if an item is selected --- ...e-ui-fabric-react-2020-08-03-01-23-54-master.json | 8 ++++++++ .../etc/office-ui-fabric-react.api.md | 2 +- .../src/components/pickers/BasePicker.tsx | 12 +++++++++--- .../src/components/pickers/BasePicker.types.ts | 6 ++++-- 4 files changed, 22 insertions(+), 6 deletions(-) create mode 100644 change/office-ui-fabric-react-2020-08-03-01-23-54-master.json diff --git a/change/office-ui-fabric-react-2020-08-03-01-23-54-master.json b/change/office-ui-fabric-react-2020-08-03-01-23-54-master.json new file mode 100644 index 00000000000000..702bcd0d0b6de2 --- /dev/null +++ b/change/office-ui-fabric-react-2020-08-03-01-23-54-master.json @@ -0,0 +1,8 @@ +{ + "type": "minor", + "comment": "BasePicker's onDismiss can now return a boolean to decide if an item is selected", + "packageName": "office-ui-fabric-react", + "email": "t-jamle@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-08-03T08:23:54.017Z" +} diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md index 0f37363dae8d21..334e6529876271 100644 --- a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md +++ b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md @@ -1640,7 +1640,7 @@ export interface IBasePickerProps extends React.Props { itemLimit?: number; onBlur?: React.FocusEventHandler; onChange?: (items?: T[]) => void; - onDismiss?: (ev?: any, selectedItem?: T) => void; + onDismiss?: (ev?: any, selectedItem?: T) => boolean | void; // @deprecated onEmptyInputFocus?: (selectedItems?: T[]) => T[] | PromiseLike; onEmptyResolveSuggestions?: (selectedItems?: T[]) => T[] | PromiseLike; diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx index 5a764369d0e8c5..72b0281d44dc0e 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx @@ -199,16 +199,22 @@ export class BasePicker> extends React.Componen public dismissSuggestions = (ev?: any): void => { const selectItemFunction = () => { + let addItemOnDismimss: boolean | void = true; if (this.props.onDismiss) { - this.props.onDismiss( + addItemOnDismimss = this.props.onDismiss( ev, this.suggestionStore.currentSuggestion ? this.suggestionStore.currentSuggestion.item : undefined, ); } if (!ev || (ev && !ev.defaultPrevented)) { - // Select the first suggestion if one is available when user leaves. - if (this.canAddItems() && this.suggestionStore.hasSelectedSuggestion() && this.state.suggestedDisplayValue) { + // Select the first suggestion if one is available and permitted by onDismiss when user leaves. + if ( + addItemOnDismimss !== false && + this.canAddItems() && + this.suggestionStore.hasSelectedSuggestion() && + this.state.suggestedDisplayValue + ) { this.addItemByIndex(0); } } diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts index 74e9b39cab36a1..a997d5b05cda10 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts @@ -191,9 +191,11 @@ export interface IBasePickerProps extends React.Props { onInputChange?: (input: string) => string; /** - * A callback to override the default behavior of adding the selected suggestion on dismiss. + * A callback to override the default behavior of adding the selected suggestion on dismiss. If it returns true or + * nothing, the selected item will be added on dismiss. If false, the selected item will not be added on dismiss. + * */ - onDismiss?: (ev?: any, selectedItem?: T) => void; + onDismiss?: (ev?: any, selectedItem?: T) => boolean | void; /** * Adds an additional alert for the currently selected suggestion. This prop should be set to true for IE11 and below, From b0dab4caf0bc53410417060b5edb098a40a65e86 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 11 Aug 2020 15:03:31 -0700 Subject: [PATCH 2/2] fixed a typo --- .../src/components/pickers/BasePicker.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx index 72b0281d44dc0e..e0f309d0e35118 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx @@ -199,9 +199,9 @@ export class BasePicker> extends React.Componen public dismissSuggestions = (ev?: any): void => { const selectItemFunction = () => { - let addItemOnDismimss: boolean | void = true; + let addItemOnDismiss: boolean | void = true; if (this.props.onDismiss) { - addItemOnDismimss = this.props.onDismiss( + addItemOnDismiss = this.props.onDismiss( ev, this.suggestionStore.currentSuggestion ? this.suggestionStore.currentSuggestion.item : undefined, ); @@ -210,7 +210,7 @@ export class BasePicker> extends React.Componen if (!ev || (ev && !ev.defaultPrevented)) { // Select the first suggestion if one is available and permitted by onDismiss when user leaves. if ( - addItemOnDismimss !== false && + addItemOnDismiss !== false && this.canAddItems() && this.suggestionStore.hasSelectedSuggestion() && this.state.suggestedDisplayValue