diff --git a/change/@fluentui-react-e609372e-4141-4a7e-af2d-2ad58f79a3d2.json b/change/@fluentui-react-e609372e-4141-4a7e-af2d-2ad58f79a3d2.json new file mode 100644 index 00000000000000..3f5fa68fc660bf --- /dev/null +++ b/change/@fluentui-react-e609372e-4141-4a7e-af2d-2ad58f79a3d2.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Debouncing onResolveSuggestions correctly after a picker has been remounted in React 18 strict mode.", + "packageName": "@fluentui/react", + "email": "420834+andyrooger@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/pickers/BasePicker.tsx b/packages/react/src/components/pickers/BasePicker.tsx index cdb89a9a153126..acf894a7ca8e51 100644 --- a/packages/react/src/components/pickers/BasePicker.tsx +++ b/packages/react/src/components/pickers/BasePicker.tsx @@ -115,6 +115,7 @@ export class BasePicker> private _styledSuggestions = getStyledSuggestions(this.SuggestionOfProperType); private _id: string; private _async: Async; + private _onResolveSuggestionsDebounced: (updatedValue: string) => void; private _overrideScrollDismiss = false; private _overrideScrollDimissTimeout: number; @@ -129,7 +130,6 @@ export class BasePicker> super(basePickerProps); initializeComponentRef(this); - this._async = new Async(this); const items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || []; @@ -160,8 +160,9 @@ export class BasePicker> } public componentDidMount(): void { + this._async = new Async(this); this.selection.setItems(this.state.items); - this._onResolveSuggestions = this._async.debounce(this._onResolveSuggestions, this.props.resolveDelay); + this._onResolveSuggestionsDebounced = this._async.debounce(this._onResolveSuggestions, this.props.resolveDelay); } public componentDidUpdate(oldProps: P, oldState: IBasePickerState) { @@ -485,7 +486,7 @@ export class BasePicker> } protected updateValue(updatedValue: string) { - this._onResolveSuggestions(updatedValue); + this._onResolveSuggestionsDebounced(updatedValue); } protected updateSuggestionsList(suggestions: T[] | PromiseLike, updatedValue?: string) { @@ -1086,7 +1087,7 @@ export class BasePicker> this.onEmptyInputFocus(); } else { if (this.suggestionStore.suggestions.length === 0) { - this._onResolveSuggestions(input); + this._onResolveSuggestionsDebounced(input); } else { this.setState({ isMostRecentlyUsedVisible: false,