From b4de29ba0f3fe896abed677367df40bfaee632f5 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 21 Feb 2023 08:37:19 -0800 Subject: [PATCH 1/3] Combobox: if value is controlled, we should not update state --- packages/react/src/components/Autofill/Autofill.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/Autofill/Autofill.tsx b/packages/react/src/components/Autofill/Autofill.tsx index 87a2cdd6f84705..77c9b5d50f03c2 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, then we should not update the value in state + // https://github.com/microsoft/fluentui/issues/18499 + updateValueInWillReceiveProps + ? onInputValueChange?.(newValue, composing) + : this.setState({ inputValue: newValue }, () => onInputValueChange?.(newValue, composing)); }; private _getDisplayValue(): string { From 5d67da2e1eeaeddbcd8627269c643ccb77276860 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 21 Feb 2023 08:40:05 -0800 Subject: [PATCH 2/3] changefile --- ...luentui-react-894d0bed-f8c8-4b12-a243-6a8d22912afe.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-894d0bed-f8c8-4b12-a243-6a8d22912afe.json 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" +} From 3af8f2648d4b5b7b495e52e605fb7405535ce6cc Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 21 Feb 2023 14:41:22 -0800 Subject: [PATCH 3/3] Update packages/react/src/components/Autofill/Autofill.tsx Co-authored-by: Sarah Higley --- packages/react/src/components/Autofill/Autofill.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Autofill/Autofill.tsx b/packages/react/src/components/Autofill/Autofill.tsx index 77c9b5d50f03c2..f4b4978e5b54c8 100644 --- a/packages/react/src/components/Autofill/Autofill.tsx +++ b/packages/react/src/components/Autofill/Autofill.tsx @@ -331,7 +331,7 @@ export class Autofill extends React.Component im newValue = onInputChange?.(newValue, composing) || ''; } - // if value is controlled, then we should not update the value in state + // 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)