From 19aeaaf7bcc6b2974fdabc1ddad61da78ac2ad7c Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gustav.hansen@strapi.io>
Date: Mon, 28 Mar 2022 10:19:16 +0200
Subject: [PATCH] GenericInput: prevent controlled/ uncontrolled errors

---
 .../lib/src/components/GenericInput/index.js  | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/packages/core/helper-plugin/lib/src/components/GenericInput/index.js b/packages/core/helper-plugin/lib/src/components/GenericInput/index.js
index 8ad1668ab2..18fa4507c0 100644
--- a/packages/core/helper-plugin/lib/src/components/GenericInput/index.js
+++ b/packages/core/helper-plugin/lib/src/components/GenericInput/index.js
@@ -51,6 +51,15 @@ const GenericInput = ({
   // therefore we cast this case to undefined
   const value = defaultValue ?? undefined;
 
+  /*
+   TODO: ideally we should pass in `defaultValue` and `value` for
+   inputs, in order to make them controlled components. This variable
+   acts as a fallback for now, to prevent React errors in devopment mode
+
+   See: https://github.com/strapi/strapi/pull/12861
+  */
+  const valueWithEmptyStringFallback = value ?? '';
+
   if (CustomInput) {
     return (
       <CustomInput
@@ -128,7 +137,7 @@ const GenericInput = ({
             id: 'app.components.ToggleCheckbox.on-label',
             defaultMessage: 'True',
           })}
-          onChange={e => {
+          onChange={(e) => {
             onChange({ target: { name, value: e.target.checked } });
           }}
           required={required}
@@ -144,7 +153,7 @@ const GenericInput = ({
           hint={hint}
           id={name}
           name={name}
-          onValueChange={value => {
+          onValueChange={(value) => {
             onChange({ target: { name, value } });
           }}
           required={required}
@@ -165,7 +174,7 @@ const GenericInput = ({
           id={name}
           hint={hint}
           name={name}
-          onChange={date => {
+          onChange={(date) => {
             const formattedDate = date.toISOString();
 
             onChange({ target: { name, value: formattedDate, type } });
@@ -175,7 +184,7 @@ const GenericInput = ({
           placeholder={formattedPlaceholder}
           required={required}
           value={value && new Date(value)}
-          selectedDateLabel={formattedDate => `Date picker, current is ${formattedDate}`}
+          selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
         />
       );
     }
@@ -196,7 +205,7 @@ const GenericInput = ({
           id={name}
           hint={hint}
           name={name}
-          onChange={date => {
+          onChange={(date) => {
             onChange({
               target: { name, value: formatISO(date, { representation: 'date' }), type },
             });
@@ -205,7 +214,7 @@ const GenericInput = ({
           placeholder={formattedPlaceholder}
           required={required}
           selectedDate={selectedDate}
-          selectedDateLabel={formattedDate => `Date picker, current is ${formattedDate}`}
+          selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
         />
       );
     }
@@ -219,7 +228,7 @@ const GenericInput = ({
           id={name}
           hint={hint}
           name={name}
-          onValueChange={value => {
+          onValueChange={(value) => {
             onChange({ target: { name, value: value ?? null, type } });
           }}
           placeholder={formattedPlaceholder}
@@ -244,7 +253,7 @@ const GenericInput = ({
           placeholder={formattedPlaceholder}
           required={required}
           type="email"
-          value={value}
+          value={valueWithEmptyStringFallback}
         />
       );
     }
@@ -265,7 +274,7 @@ const GenericInput = ({
           placeholder={formattedPlaceholder}
           required={required}
           type="text"
-          value={value}
+          value={valueWithEmptyStringFallback}
         />
       );
     }
@@ -282,7 +291,7 @@ const GenericInput = ({
                 defaultMessage: 'Show password',
               })}
               onClick={() => {
-                setShowPassword(prev => !prev);
+                setShowPassword((prev) => !prev);
               }}
               style={{
                 border: 'none',
@@ -307,7 +316,7 @@ const GenericInput = ({
           placeholder={formattedPlaceholder}
           required={required}
           type={showPassword ? 'text' : 'password'}
-          value={value}
+          value={valueWithEmptyStringFallback}
         />
       );
     }
@@ -321,7 +330,7 @@ const GenericInput = ({
           id={name}
           hint={hint}
           name={name}
-          onChange={value => {
+          onChange={(value) => {
             onChange({ target: { name, value: value === '' ? null : value, type: 'select' } });
           }}
           placeholder={formattedPlaceholder}
@@ -352,7 +361,7 @@ const GenericInput = ({
           required={required}
           placeholder={formattedPlaceholder}
           type={type}
-          value={value}
+          value={valueWithEmptyStringFallback}
         >
           {value}
         </Textarea>
@@ -379,7 +388,7 @@ const GenericInput = ({
           id={name}
           hint={hint}
           name={name}
-          onChange={time => {
+          onChange={(time) => {
             onChange({ target: { name, value: `${time}`, type } });
           }}
           onClear={() => {