Fix BasePicker's onDismiss behavior from changing if getTextFromItem …

…provided (#14302) * BasePicker's onDismiss can now return a boolean to decide if an item is selected * fixed a typo Co-authored-by: James <[email protected]>
microsoft · Aug 12, 2020 · 11f792c · 11f792c
1 parent e6bac42
commit 11f792c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
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
@@ -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": "[email protected]",
+  "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
@@ -1636,7 +1636,7 @@ export interface IBasePickerProps<T> extends React.Props<any> {
     itemLimit?: number;
     onBlur?: React.FocusEventHandler<HTMLInputElement | Autofill>;
     onChange?: (items?: T[]) => void;
-    onDismiss?: (ev?: any, selectedItem?: T) => void;
+    onDismiss?: (ev?: any, selectedItem?: T) => boolean | void;
     // @deprecated
     onEmptyInputFocus?: (selectedItems?: T[]) => T[] | PromiseLike<T[]>;
     onEmptyResolveSuggestions?: (selectedItems?: T[]) => T[] | PromiseLike<T[]>;

diff --git 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<T, P extends IBasePickerProps<T>> 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
@@ -191,9 +191,11 @@ export interface IBasePickerProps<T> extends React.Props<any> {
   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,