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 0000000000000..702bcd0d0b6de --- /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 9554d4e1233b1..ec71a0e292093 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 @@ -1636,7 +1636,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 5a764369d0e8c..e0f309d0e3511 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 addItemOnDismiss: boolean | void = true; if (this.props.onDismiss) { - this.props.onDismiss( + addItemOnDismiss = 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 ( + addItemOnDismiss !== 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 74e9b39cab36a..a997d5b05cda1 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,