diff --git a/common/changes/office-ui-fabric-react/amyngu-removeRedundantSelectedItems_2018-05-04-00-01.json b/common/changes/office-ui-fabric-react/amyngu-removeRedundantSelectedItems_2018-05-04-00-01.json new file mode 100644 index 0000000000000..8c864e4952514 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.tsx index 9d54772ddcac0..d070fe85e1ed4 100644 --- a/packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.tsx +++ b/packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.tsx @@ -41,13 +41,10 @@ export class BaseExtendedPicker> 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: '', }; diff --git a/packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.types.ts b/packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.types.ts index 7be3b7c42785d..5b4fcdfeb4394 100644 --- a/packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.types.ts +++ b/packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.types.ts @@ -96,9 +96,10 @@ export interface IBaseExtendedPickerProps { * A callback to process a selection after the user selects something from the picker. */ onItemSelected?: (selectedItem?: T) => T | PromiseLike; + /** - * 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[]; } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/FloatingPicker/BaseFloatingPicker.tsx b/packages/office-ui-fabric-react/src/components/FloatingPicker/BaseFloatingPicker.tsx index b1aff84da7cee..a0f8fbe02aa24 100644 --- a/packages/office-ui-fabric-react/src/components/FloatingPicker/BaseFloatingPicker.tsx +++ b/packages/office-ui-fabric-react/src/components/FloatingPicker/BaseFloatingPicker.tsx @@ -64,7 +64,7 @@ export class BaseFloatingPicker> 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> 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> 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> 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> extend case KeyCodes.del: if (this.props.onRemoveSuggestion + && this.suggestionsControl && this.suggestionsControl.hasSuggestionSelected && this.suggestionsControl.currentSuggestion) { (this.props.onRemoveSuggestion as ((item: T) => void))( diff --git a/packages/office-ui-fabric-react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx b/packages/office-ui-fabric-react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx index 3f4049867221f..4fc40d65513ab 100644 --- a/packages/office-ui-fabric-react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx +++ b/packages/office-ui-fabric-react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx @@ -95,10 +95,11 @@ export class EditingItem extends BaseComponent): 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(); + } } }