Remove redundant selected items prop on BaseExtendedPicker

common/changes/office-ui-fabric-react/amyngu-removeRedundantSelectedItems_2018-05-04-00-01.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Remove redundant defaultSelectedItem prop for BaseExtendedPicker",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "amyngu@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.tsx

@@ -41,13 +41,10 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   constructor(basePickerProps: P) {
     super(basePickerProps);
 
-    const items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || [];
-
     this.selection = new Selection({ onSelectionChanged: () => this.onSelectionChange() });
-    this.selection.setItems(items);
 
     this.state = {
-      items: items ? items : [],
+      items: this.props.selectedItemsListProps.selectedItems ? this.props.selectedItemsListProps.selectedItems : [],
       suggestedDisplayValue: '',
     };
 

packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.types.ts

@@ -96,9 +96,10 @@ export interface IBaseExtendedPickerProps<T> {
    * A callback to process a selection after the user selects something from the picker.
    */
   onItemSelected?: (selectedItem?: T) => T | PromiseLike<T>;
+
   /**
-   * The items that the base picker should currently display as selected. If this is provided then the picker will act as a controlled
-   * component.
+   * Deprecated at 5.96.0. Use defaultSelectedItems or selectedItems in selectedItemsListProps instead.
+   * @deprecated
    */
   selectedItems?: T[];
 }

packages/office-ui-fabric-react/src/components/FloatingPicker/BaseFloatingPicker.tsx

@@ -64,7 +64,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
   }
 
   public forceResolveSuggestion(): void {
-    if (this.suggestionsControl.hasSuggestionSelected()) {
+    if (this.suggestionsControl && this.suggestionsControl.hasSuggestionSelected()) {
       this.completeSuggestion();
     } else {
       this._onValidateInput();
@@ -141,7 +141,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
   }
 
   public completeSuggestion = (): void => {
-    if (this.suggestionsControl.hasSuggestionSelected()) {
+    if (this.suggestionsControl && this.suggestionsControl.hasSuggestionSelected()) {
       this.onChange(this.suggestionsControl.currentSuggestion!.item);
     }
   }
@@ -284,7 +284,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     this.updateSuggestions(suggestions);
     let itemValue: string | undefined = undefined;
 
-    if (this.suggestionsControl.currentSuggestion) {
+    if (this.suggestionsControl && this.suggestionsControl.currentSuggestion) {
       itemValue = this._getTextFromItem(
         this.suggestionsControl.currentSuggestion.item,
         updatedValue
@@ -321,7 +321,10 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     if (this.props.onRemoveSuggestion) {
       (this.props.onRemoveSuggestion as ((item: T) => void))(item);
     }
-    this.suggestionsControl.removeSuggestion(index);
+
+    if (this.suggestionsControl) {
+      this.suggestionsControl.removeSuggestion(index);
+    }
   }
 
   protected onKeyDown = (ev: MouseEvent): void => {
@@ -353,6 +356,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
 
       case KeyCodes.del:
         if (this.props.onRemoveSuggestion
+          && this.suggestionsControl
           && this.suggestionsControl.hasSuggestionSelected
           && this.suggestionsControl.currentSuggestion) {
           (this.props.onRemoveSuggestion as ((item: T) => void))(

packages/office-ui-fabric-react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx

@@ -95,10 +95,11 @@ export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps,
   }
 
   private _onInputBlur = (ev: React.FocusEvent<HTMLElement>): void => {
-    if (this._editingFloatingPicker.current &&
-      (ev.relatedTarget === null || (ev.relatedTarget as HTMLElement).className.indexOf('ms-SearchMore-button') === -1)
-    ) {
-      this._editingFloatingPicker.current.forceResolveSuggestion();
+    if (this._editingFloatingPicker.current && ev.relatedTarget !== null) {
+      const target = ev.relatedTarget as HTMLElement;
+      if (target.className.indexOf('ms-Suggestions-itemButton') === -1 && target.className.indexOf('ms-Suggestions-sectionButton') === -1) {
+        this._editingFloatingPicker.current.forceResolveSuggestion();
+      }
     }
   }