Fix duplicate field IDs on some setting pages

airdcpp-web · Jun 15, 2024 · 59fda6f · 59fda6f
1 parent 1e8062b
commit 59fda6f
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 7 deletions.
diff --git a/src/components/form/Form.tsx b/src/components/form/Form.tsx
@@ -151,6 +151,7 @@ export interface FormProps<ValueType extends Partial<UI.FormValueMap> = UI.FormV
   title?: string;
   className?: string;
   optionTitleFormatter?: UI.OptionTitleParser;
+  id?: string;
 }
 
 interface State<ValueType> {
@@ -347,6 +348,7 @@ class Form<
             onFieldSetting,
             location,
             optionTitleFormatter,
+            id,
           } = this.props;
           const { formValue, error } = this.state;
 
@@ -372,6 +374,7 @@ class Form<
               {!!title && <div className="ui form header">{title}</div>}
               <TcombForm
                 ref={(c) => (this.form = c)}
+                id={id}
                 type={type}
                 options={options}
                 value={formValue}

diff --git a/src/components/form/tcomb/components.js b/src/components/form/tcomb/components.js
@@ -830,6 +830,10 @@ export class Form extends React.Component {
   }
 
   getSeed() {
+    if (this.props.id) {
+      return this.props.id;
+    }
+
     const rii = this._reactInternalInstance;
     if (rii) {
       if (rii._hostContainerInfo) {

diff --git a/src/components/form/tcomb/index.d.ts b/src/components/form/tcomb/index.d.ts
@@ -155,6 +155,8 @@ export declare namespace form {
     onChange?: (raw: any, path: Path, kind?: ChangeKind) => void;
 
     context?: any;
+
+    id?: string;
   }
 
   export class Component extends React.Component {

diff --git a/src/routes/Settings/components/LocalSettingForm.tsx b/src/routes/Settings/components/LocalSettingForm.tsx
@@ -12,7 +12,7 @@ import * as UI from 'types/ui';
 
 import { translateForm } from 'utils/FormUtils';
 import { useLocation } from 'react-router';
-import { SettingSaveContext } from '../effects/useSettingSaveContext';
+import { SettingSaveContext, getSettingFormId } from '../effects/useSettingSaveContext';
 
 export interface LocalSettingFormProps
   extends Omit<FormProps, 'onSave' | 'fieldDefinitions' | 'value' | 'location'> {
@@ -50,6 +50,7 @@ const LocalSettingForm: React.FC<LocalSettingFormProps> = ({
     <div className="local setting-form">
       <Form
         ref={(f) => saveContext.addFormRef(keys, f)}
+        id={getSettingFormId(keys)}
         location={location}
         onSave={onSave}
         fieldDefinitions={definitions}

diff --git a/src/routes/Settings/components/RemoteSettingForm.tsx b/src/routes/Settings/components/RemoteSettingForm.tsx
@@ -15,7 +15,7 @@ import Form, {
 import * as API from 'types/api';
 import * as UI from 'types/ui';
 import { useLocation } from 'react-router';
-import { SettingSaveContext } from '../effects/useSettingSaveContext';
+import { SettingSaveContext, getSettingFormId } from '../effects/useSettingSaveContext';
 
 export interface RemoteSettingFormProps
   extends Omit<FormProps, 'onSave' | 'value' | 'fieldDefinitions' | 'location'> {
@@ -67,6 +67,7 @@ const RemoteSettingForm: React.FC<Props> = ({
     <div className="remote setting-form">
       <Form
         {...other}
+        id={getSettingFormId(keys)}
         ref={(f) => saveContext.addFormRef(keys, f)}
         onSave={onSave}
         fieldDefinitions={fieldDefinitions}

diff --git a/src/routes/Settings/effects/useSettingSaveContext.ts b/src/routes/Settings/effects/useSettingSaveContext.ts
@@ -33,8 +33,8 @@ export interface SettingSaveContextProps {
   saveContext: SettingSaveContext;
 }
 
-const getFormId = (keys: string[]) => {
-  return keys.join('_');
+export const getSettingFormId = (keys: string[]) => {
+  return keys.join('|');
 };
 
 interface UseSaveContextProps {
@@ -115,7 +115,7 @@ export const useSettingSaveContext = ({
         c.hasOwnProperty('save'),
         'Invalid setting form component supplied for SaveDecorator (save property missing)',
       );
-      forms.set(getFormId(keys), c);
+      forms.set(getSettingFormId(keys), c);
     } else {
       // Switching to another page
       // Single forms shouldn't be unmounted otherwise, but using identifiers would still be safer...
@@ -124,7 +124,7 @@ export const useSettingSaveContext = ({
   };
 
   const getFormRef = (keys: string[]) => {
-    return forms.get(getFormId(keys))!;
+    return forms.get(getSettingFormId(keys))!;
   };
 
   const saveContext: SettingSaveContext = {

diff --git a/src/routes/Settings/routes/System/components/users/WebUserDialog.tsx b/src/routes/Settings/routes/System/components/users/WebUserDialog.tsx
@@ -277,7 +277,7 @@ class WebUserDialog extends Component<Props> {
           fieldDefinitions={this.entry}
           onFieldSetting={this.onFieldSetting}
           onSave={this.onSave}
-          sourceValue={this.props.user as Entry}
+          sourceValue={user as Entry}
           location={this.props.location}
         />
       </Modal>