fix(settings): fix changed settings consantly resetting #2080

Author: Koenkk

src/components/device-page/DeviceSettings.tsx

@@ -22,6 +22,7 @@ export class DeviceSettings extends Component<DeviceSettingsProps, DeviceSetting
 
         updatedDeviceConfig: {},
     };
+    formData: KVP | KVP[] | undefined = undefined;
     getGenericDeviceSettingsSchema(): JSONSchema7 {
         const {
             bridgeInfo: { config_schema: configSchema = {} },
@@ -53,6 +54,10 @@ export class DeviceSettings extends Component<DeviceSettingsProps, DeviceSetting
 
     render(): ReactNode {
         const { schema, data, uiSchema } = this.getSchemaAndConfig();
+        // Put formData in separate variable to prevent overwrites on re-render.
+        if (!this.formData) {
+            this.formData = data;
+        }
         return (
             <>
                 <ReadTheDocsInfo
@@ -61,7 +66,8 @@ export class DeviceSettings extends Component<DeviceSettingsProps, DeviceSetting
 
                 <Form
                     schema={schema}
-                    formData={data}
+                    formData={this.formData}
+                    onChange={(data) => this.formData = data.formData}
                     onSubmit={this.updateConfig}
                     uiSchema={uiSchema}
                     fields={{ TitleField, DescriptionField }}

src/components/settings-page/index.tsx

@@ -97,6 +97,7 @@ class SettingsPage extends Component<
     state = {
         keyName: ROOT_KEY_NAME,
     };
+    settingsFormData: {[s: string]: Record<string, unknown>} = {};
     renderCategoriesTabs(): JSX.Element {
         const { t } = this.props;
         return (
@@ -380,6 +381,10 @@ class SettingsPage extends Component<
     renderSettings(): JSX.Element {
         const { keyName } = this.state;
         const { currentSchema, currentConfig } = this.getSettingsInfo();
+        // Put formData in separate variable to prevent overwrites on re-render.
+        if (!(keyName in this.settingsFormData)) {
+            this.settingsFormData[keyName] = currentConfig;
+        }
         return (
             <div className="tab">
                 {this.renderSettingsTabs()}
@@ -388,7 +393,8 @@ class SettingsPage extends Component<
                         <Form
                             idPrefix={keyName}
                             schema={currentSchema}
-                            formData={currentConfig}
+                            formData={this.settingsFormData[keyName]}
+                            onChange={(data) => this.settingsFormData[keyName] = data.formData}
                             onSubmit={this.onSettingsSave}
                             uiSchema={uiSchemas[keyName] as UiSchema}
                             fields={{ TitleField, DescriptionField }}