diff --git a/change/@fluentui-react-894d0bed-f8c8-4b12-a243-6a8d22912afe.json b/change/@fluentui-react-894d0bed-f8c8-4b12-a243-6a8d22912afe.json new file mode 100644 index 00000000000000..3df77f55fbded5 --- /dev/null +++ b/change/@fluentui-react-894d0bed-f8c8-4b12-a243-6a8d22912afe.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Fix: Combobox if value is controlled, we should not update state", + "packageName": "@fluentui/react", + "email": "mgodbolt@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/Autofill/Autofill.tsx b/packages/react/src/components/Autofill/Autofill.tsx index 87a2cdd6f84705..f4b4978e5b54c8 100644 --- a/packages/react/src/components/Autofill/Autofill.tsx +++ b/packages/react/src/components/Autofill/Autofill.tsx @@ -326,12 +326,16 @@ export class Autofill extends React.Component im } // eslint-disable-next-line deprecation/deprecation - const { onInputChange, onInputValueChange } = this.props; + const { onInputChange, onInputValueChange, updateValueInWillReceiveProps } = this.props; if (onInputChange) { newValue = onInputChange?.(newValue, composing) || ''; } - this.setState({ inputValue: newValue }, () => onInputValueChange?.(newValue, composing)); + // if value is controlled in updateValueInWillReceiveProps, then we should not update the value in state now + // https://github.com/microsoft/fluentui/issues/18499 + updateValueInWillReceiveProps + ? onInputValueChange?.(newValue, composing) + : this.setState({ inputValue: newValue }, () => onInputValueChange?.(newValue, composing)); }; private _getDisplayValue(): string {