diff --git a/src/controls/listItemPicker/IListItemPickerState.ts b/src/controls/listItemPicker/IListItemPickerState.ts index 9c6a3de79..6bd1d8c13 100644 --- a/src/controls/listItemPicker/IListItemPickerState.ts +++ b/src/controls/listItemPicker/IListItemPickerState.ts @@ -3,4 +3,5 @@ export interface IListItemPickerState { showError: boolean; errorMessage: string; suggestionsHeaderText:string; + selectedItems?: any[]; } diff --git a/src/controls/listItemPicker/ListItemPicker.tsx b/src/controls/listItemPicker/ListItemPicker.tsx index bbcf84c65..11b68839b 100644 --- a/src/controls/listItemPicker/ListItemPicker.tsx +++ b/src/controls/listItemPicker/ListItemPicker.tsx @@ -5,11 +5,11 @@ import { TagPicker } from "office-ui-fabric-react/lib/components/pickers/TagPick import { Label } from "office-ui-fabric-react/lib/Label"; import { IListItemPickerProps, IListItemPickerState } from "."; import * as telemetry from '../../common/telemetry'; +import isEqual from 'lodash/isEqual'; export class ListItemPicker extends React.Component { private _spservice: SPservice; - private selectedItems: any[]; constructor(props: IListItemPickerProps) { super(props); @@ -21,19 +21,26 @@ export class ListItemPicker extends React.Component { const { className, disabled, itemLimit, placeholder } = this.props; + const { + suggestionsHeaderText, + noresultsFoundText, + errorMessage, + selectedItems + } = this.state; return (
@@ -48,10 +61,10 @@ export class ListItemPicker extends React.Component { return item.name; }} getTextFromItem={this.getTextFromItem} pickerSuggestionsProps={{ - suggestionsHeaderText: this.state.suggestionsHeaderText, - noResultsFoundText: this.state.noresultsFoundText + suggestionsHeaderText: suggestionsHeaderText, + noResultsFoundText: noresultsFoundText }} - defaultSelectedItems={this.props.defaultSelectedItems || []} + selectedItems={selectedItems} onChange={this.onItemChanged} className={className} itemLimit={itemLimit} @@ -60,8 +73,8 @@ export class ListItemPicker extends React.Component - {!!this.state.errorMessage && - ()} + {!!errorMessage && + ()}
); } @@ -77,7 +90,9 @@ export class ListItemPicker extends React.Component { - this.selectedItems = selectedItems; + this.setState({ + selectedItems: selectedItems + }); this.props.onSelectedItem(selectedItems); } @@ -87,7 +102,9 @@ export class ListItemPicker extends React.Component { let resolvedSugestions: { key: string; name: string }[] = await this.loadListItems(filterText); - const selectedItems = [...this.selectedItems, ...(this.props.defaultSelectedItems || [])]; + const { + selectedItems + } = this.state; // Filter out the already retrieved items, so that they cannot be selected again if (selectedItems && selectedItems.length > 0) {