diff --git a/common/changes/office-ui-fabric-react/basepicker-async-debounce_2018-03-02-17-42.json b/common/changes/office-ui-fabric-react/basepicker-async-debounce_2018-03-02-17-42.json new file mode 100644 index 0000000000000..217fc2af92134 --- /dev/null +++ b/common/changes/office-ui-fabric-react/basepicker-async-debounce_2018-03-02-17-42.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Add async debounce option to BasePicker", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "jabrassi@microsoft.com" +} \ No newline at end of file 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 c3d5619d66945..054b8024cc91f 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx @@ -74,6 +74,7 @@ export class BasePicker> extends BaseComponent< public componentDidMount() { this.selection.setItems(this.state.items); + this._onResolveSuggestions = this._async.debounce(this._onResolveSuggestions, this.props.resolveDelay); } public componentWillReceiveProps(newProps: P) { @@ -313,8 +314,7 @@ export class BasePicker> extends BaseComponent< } protected updateValue(updatedValue: string) { - const suggestions: T[] | PromiseLike = this.props.onResolveSuggestions(updatedValue, this.state.items); - this.updateSuggestionsList(suggestions, updatedValue); + this._onResolveSuggestions(updatedValue); } protected updateSuggestionsList(suggestions: T[] | PromiseLike, updatedValue?: string) { @@ -683,6 +683,14 @@ export class BasePicker> extends BaseComponent< this.onChange(items); } + private _onResolveSuggestions(updatedValue: string): void { + const suggestions: T[] | PromiseLike | null = this.props.onResolveSuggestions(updatedValue, this.state.items); + + if (suggestions !== null) { + this.updateSuggestionsList(suggestions, updatedValue); + } + } + private _onValidateInput() { if (this.props.onValidateInput && (this.props.onValidateInput as any)(this.input.value) !== ValidationState.invalid && this.props.createGenericItem) { const itemToConvert = this.props.createGenericItem(this.input.value, this.props.onValidateInput(this.input.value)); 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 d8841b5265c0f..de2cb6acb91cb 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 @@ -33,8 +33,15 @@ export interface IBasePickerProps extends React.Props { /** * A callback for what should happen when a person types text into the input. * Returns the already selected items so the resolver can filter them out. + * If used in conjunction with resolveDelay this will ony kick off after the delay throttle. */ onResolveSuggestions: (filter: string, selectedItems?: T[]) => T[] | PromiseLike; + /** + * The delay time in ms before resolving suggestions, which is kicked off when input has been cahnged. + * e.g. If a second input change happens within the resolveDelay time, the timer will start over. + * Only until after the timer completes will onResolveSuggestions be called. + */ + resolveDelay?: number; /** * A callback for what should happen when a user clicks the input. */ diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx index 9e0ee4a011c86..c6057aa9bdece 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx @@ -151,6 +151,7 @@ export class PeoplePickerTypesExample extends BaseComponent ); } @@ -174,6 +175,7 @@ export class PeoplePickerTypesExample extends BaseComponent ); } @@ -194,6 +196,7 @@ export class PeoplePickerTypesExample extends BaseComponent ); } @@ -216,6 +219,7 @@ export class PeoplePickerTypesExample extends BaseComponent ); } @@ -238,6 +242,7 @@ export class PeoplePickerTypesExample extends BaseComponent ); } @@ -260,6 +265,7 @@ export class PeoplePickerTypesExample extends BaseComponent ); } @@ -287,6 +293,7 @@ export class PeoplePickerTypesExample extends BaseComponent) => console.log('onFocus called') } } componentRef={ this._resolveRef('_picker') } + resolveDelay={ 300 } /> { controlledItems.map((item, index) =>