Merge pull request #5890 from facebook/chore/fix-input-component-chan…

…ging-from-uncontrolled-to-controlled ReactJS: Fix an input component changing from uncontrolled to controlled
hotosm · Jun 22, 2023 · f65fc5e · f65fc5e
2 parents d1e1c9f + 93803fb
commit f65fc5e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/frontend/src/components/projectEdit/metadataForm.js b/frontend/src/components/projectEdit/metadataForm.js
@@ -162,7 +162,10 @@ export const MetadataForm = () => {
             values={{ link: <IdDocsLink /> }}
           />
         </p>
-        <ExtraIdParams value={projectInfo.extraIdParams} setProjectInfo={setProjectInfo} />
+        <ExtraIdParams
+          value={projectInfo.extraIdParams ? projectInfo.extraIdParams : ''}
+          setProjectInfo={setProjectInfo}
+        />
       </div>
       <div className={styleClasses.divClass}>
         <label className={styleClasses.labelClass}>

diff --git a/frontend/src/components/user/forms/notifications.js b/frontend/src/components/user/forms/notifications.js
@@ -11,31 +11,37 @@ export function UserNotificationsForm(props) {
       labelId: 'mentions',
       descriptionId: 'mentionsDescription',
       fieldName: 'mentionsNotifications',
+      default: true,
     },
     {
       labelId: 'teamUpdates',
       descriptionId: 'teamUpdatesDescription',
       fieldName: 'teamsAnnouncementNotifications',
+      default: false,
     },
     {
       labelId: 'taskUpdates',
       descriptionId: 'taskUpdatesDescription',
       fieldName: 'tasksNotifications',
+      default: true,
     },
     {
       labelId: 'projectUpdates',
       descriptionId: 'projectUpdatesDescription',
       fieldName: 'projectsNotifications',
+      default: true,
     },
     {
       labelId: 'questionsAndComments',
       descriptionId: 'questionsAndCommentsDescription',
       fieldName: 'questionsAndCommentsNotifications',
+      default: false,
     },
     {
       labelId: 'taskComments',
       descriptionId: 'taskCommentsDescription',
       fieldName: 'taskCommentsNotifications',
+      default: false,
     },
   ];
 
@@ -51,7 +57,11 @@ export function UserNotificationsForm(props) {
             labelId={field.labelId}
             descriptionId={field.descriptionId}
           >
-            <SwitchToggleField fieldName={field.fieldName} removeVerticalPadding />
+            <SwitchToggleField
+              fieldName={field.fieldName}
+              default={field.default}
+              removeVerticalPadding
+            />
           </CustomField>
         ))}
       </div>

diff --git a/frontend/src/components/user/forms/settings.js b/frontend/src/components/user/forms/settings.js
@@ -61,7 +61,7 @@ function _UserSettingsForm(props) {
       </h3>
       <div className="blue-grey">
         <CustomField labelId="expertMode" descriptionId="expertModeDescription">
-          <SwitchToggleField fieldName="isExpert" removeVerticalPadding />
+          <SwitchToggleField fieldName="isExpert" default={false} removeVerticalPadding />
         </CustomField>
         <CustomField labelId="defaultEditor" descriptionId="defaultEditorDescription" isDropdown>
           <EditorDropdown />

diff --git a/frontend/src/components/user/forms/switchToggleField.js b/frontend/src/components/user/forms/switchToggleField.js
@@ -24,9 +24,13 @@ function _SwitchToggleField(props) {
     setValue(!value);
   };
 
+  let val = value;
+  if ((val === undefined || val === null) && props.hasOwnProperty('default')) {
+    val = props.default;
+  }
   return (
     <div className={`fr ${props.removeVerticalPadding ? '' : 'pv2'} dib`}>
-      <SwitchToggle onChange={(e) => onSwitchChange()} isChecked={value} />
+      <SwitchToggle onChange={(e) => onSwitchChange()} isChecked={val} />
     </div>
   );
 }