indec-it · maximilianoforlenza · Aug 28, 2023 · Aug 28, 2023
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -46,7 +46,10 @@ function Checkbox({
               <MuiCheckbox
                 data-testid={`option-${index}`}
                 checked={field.value.includes(option.value)}
-                onChange={e => handleChecked(e, options, option, field, form.setFieldValue)}
+                onChange={e => {
+                  handleChecked(e, options, option, field, form.setFieldValue);
+                  form.setFieldTouched(field.name, false);
+                }}
               />
             )}
             label={option.label}

diff --git a/src/components/Checkbox/Checkbox.test.js b/src/components/Checkbox/Checkbox.test.js
@@ -46,7 +46,7 @@ describe('<Checkbox>', () => {
       ],
       label: {text: 'Select the options'},
       field: {value: [], name: 'test'},
-      form: {setFieldValue: jest.fn(), errors: {}, submitCount: 0},
+      form: {setFieldValue: jest.fn(), setFieldTouched: jest.fn(), errors: {}, submitCount: 0},
       readOnlyMode: false,
       required: true,
       warnings: {}

diff --git a/src/components/Currency/Currency.js b/src/components/Currency/Currency.js
@@ -8,7 +8,7 @@ function Currency({form, field, label, ...props}) {
   const handleChange = values => {
     const {formattedValue} = values;
     form.setFieldValue(field.name, formattedValue);
-    form.setFieldTouched(field.name, true);
+    form.setFieldTouched(field.name, false);
   };
 
   return (

diff --git a/src/components/DatePicker/DatePicker.js b/src/components/DatePicker/DatePicker.js
@@ -25,7 +25,10 @@ function DatePicker({
           type={dateType}
           label={isRange ? 'Fecha de inicio' : ''}
           value={isRange ? field.value.start : field.value}
-          onChange={newValue => form.setFieldValue(isRange ? `${field.name}.start` : field.name, newValue)}
+          onChange={newValue => {
+            form.setFieldValue(isRange ? `${field.name}.start` : field.name, newValue);
+            form.setFieldTouched(isRange ? `${field.name}.start` : field.name, false);
+          }}
           renderInput={params => (
             <TextField
               {...params}
@@ -46,7 +49,10 @@ function DatePicker({
             type={dateType}
             label="Fecha de fin"
             value={field.value.end}
-            onChange={newValue => form.setFieldValue(`${field.name}.end`, newValue)}
+            onChange={newValue => {
+              form.setFieldValue(`${field.name}.end`, newValue);
+              form.setFieldTouched(`${field.name}.end`, false);
+            }}
             renderInput={params => (
               <TextField
                 {...params}

diff --git a/src/components/FormBuilder/FormBuilder.js b/src/components/FormBuilder/FormBuilder.js
@@ -43,8 +43,9 @@ function FormBuilder({
       enableReinitialize
       validationSchema={validateSchema}
       onSubmit={onSubmit}
+      validateOnChange={false}
     >
-      {({values, setValues, errors}) => {
+      {({values, setValues}) => {
         const warnings = getWarnings(warningSchema, values) || {};
         return (
           <Form>
@@ -64,7 +65,7 @@ function FormBuilder({
                             section={section}
                             values={currentSection}
                             isReadOnly={isReadOnly}
-                            isValid={!errors?.[section.name]?.[index]}
+                            isValid={validateSchema.isValidSync({[section.name]: values?.[section.name]})}
                           />
                         ) : (
                           <SectionHeader
@@ -75,7 +76,7 @@ function FormBuilder({
                             section={section}
                             values={currentSection}
                             isReadOnly={isReadOnly}
-                            isValid={!errors?.[section.name]?.[index]}
+                            isValid={validateSchema.isValidSync({[section.name]: values?.[section.name]})}
                           />
                         )
                     }

diff --git a/src/components/InputLabel/InputLabel.js b/src/components/InputLabel/InputLabel.js
@@ -16,7 +16,7 @@ import labelPropTypes from '@/utils/propTypes/label';
 function InputLabel({
   label, form, field, disabled, warnings
 }) {
-  const {hasWarning, hasError, fieldMustBeCompleted} = hasFormikErrorsAndWarnings({form, field, warnings});
+  const {hasWarning, hasError} = hasFormikErrorsAndWarnings({form, field, warnings});
   return (
     <Stack direction="row" spacing={2} data-testid="input-label">
       <Stack direction="row" mb={0.5} alignItems="center" sx={{opacity: !disabled ? 1 : 0.3}}>
@@ -38,7 +38,7 @@ function InputLabel({
         <Typography sx={{fontWeight: 'bold', fontSize: '17px'}}>
           {label.text}
           {' '}
-          {fieldMustBeCompleted && '*'}
+          {hasError && '*'}
         </Typography>
       </Stack>
       {hasError && !disabled && (

diff --git a/src/components/Radio/MobileRadio/MobileRadio.js b/src/components/Radio/MobileRadio/MobileRadio.js
@@ -21,7 +21,10 @@ function MobileRadio({
             disabled={disabled}
             variant={option.value === field.value ? 'contained' : 'outlined'}
             onClick={
-              () => form.setFieldValue(field.name, option.value === field.value ? '' : option.value)
+              () => {
+                form.setFieldValue(field.name, option.value === field.value ? '' : option.value);
+                form.setFieldTouched(field.name, false);
+              }
             }
             size="small"
           >

diff --git a/src/components/Radio/MobileRadio/MobileRadio.test.js b/src/components/Radio/MobileRadio/MobileRadio.test.js
@@ -46,7 +46,7 @@ describe('<MobileRadio>', () => {
       required: false,
       label: 'Select an option',
       field: {value: '', name: 'test'},
-      form: {setFieldValue: jest.fn(), errors: {}, submitCount: 0}
+      form: {setFieldValue: jest.fn(), setFieldTouched: jest.fn(), errors: {}, submitCount: 0}
     };
   });
 

diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.js
@@ -4,7 +4,7 @@ import MuiRadio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Stack from '@mui/material/Stack';
-import ClearIcon from '@mui/icons-material/Clear';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 import FieldMessage from '@/components/FieldMessage';
 import InputLabel from '@/components/InputLabel';
@@ -31,7 +31,14 @@ function Radio({
     ) : (
       <Stack direction="column" sx={{width: '100%'}} data-testid="radio">
         <InputLabel warnings={warnings} form={form} field={field} label={label} disabled={disabled} />
-        <RadioGroup {...field}>
+        <RadioGroup
+          {...field}
+          onBlur={form.handleBlur}
+          onChange={e => {
+            field.onChange(e);
+            form.setFieldTouched(field.name, false);
+          }}
+        >
           {options.map((option, index) => (
             <Stack key={option.value} direction="row">
               <FormControlLabel
@@ -48,7 +55,7 @@ function Radio({
                   color="error"
                   data-testid={`clean-option-${index}`}
                 >
-                  <ClearIcon />
+                  <DeleteIcon />
                 </IconButton>
               )}
             </Stack>

diff --git a/src/components/Radio/Radio.test.js b/src/components/Radio/Radio.test.js
@@ -46,7 +46,7 @@ describe('<Radio>', () => {
       required: false,
       label: 'Select an option',
       field: {value: '', name: 'test'},
-      form: {setFieldValue: jest.fn(), errors: {}, submitCount: 0}
+      form: {setFieldValue: jest.fn(), setFieldTouched: jest.fn(), errors: {}, submitCount: 0}
     };
   });
 

diff --git a/src/components/RadioTable/RadioTable.js b/src/components/RadioTable/RadioTable.js
@@ -33,7 +33,10 @@ function RadioTable({
                     <MuiRadio
                       checked={subOption.value === field.value[option.name]}
                       onChange={
-                        e => form.setFieldValue(`${field.name}.${option.name}`, e.target.value)
+                        e => {
+                          form.setFieldValue(`${field.name}.${option.name}`, e.target.value);
+                          form.setFieldTouched(field.name, false);
+                        }
                       }
                     />
                   )}

diff --git a/src/components/RadioTable/RadioTable.test.js b/src/components/RadioTable/RadioTable.test.js
@@ -83,7 +83,7 @@ describe('<RadioTable>', () => {
       required: false,
       label: 'Select the correct options',
       field: {value: {S1P1O1: undefined, S1P1O2: undefined, S1P1O3: undefined}, name: 'test'},
-      form: {setFieldValue: jest.fn(), errors: {}, submitCount: 0}
+      form: {setFieldValue: jest.fn(), setFieldTouched: jest.fn(), errors: {}, submitCount: 0}
     };
   });
 

diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -11,6 +11,7 @@ function Select({
 }) {
   const handleChange = selectedValue => {
     form.setFieldValue(field.name, selectedValue ? selectedValue[keyValue] : undefined);
+    form.setFieldTouched(field.name, false);
     onClean(form);
   };
   const selectedValue = useMemo(() => options.find(option => option[keyValue] === field.value) || {}, [field?.value]);
@@ -39,6 +40,7 @@ function Select({
       getOptionLabel={option => option.label || ''}
       value={selectedValue}
       disabled={disabled}
+      onBlur={form.handleBlur}
     />
   );
 }

diff --git a/src/components/TextField/TextField.js b/src/components/TextField/TextField.js
@@ -48,8 +48,13 @@ function TextField({
           )
         }}
         {...field}
+        onChange={e => {
+          field.onChange(e);
+          form.setFieldTouched(field.name, false);
+        }}
         {...props}
         disabled={disabled}
+        onBlur={form.handleBlur}
       />
       <FieldMessage warnings={warnings} form={form} field={field} disabled={disabled} />
     </Box>

diff --git a/src/components/TextField/TextField.test.js b/src/components/TextField/TextField.test.js
@@ -12,7 +12,7 @@ describe('<TextField>', () => {
       label: {text: 'Write your name'},
       disabled: false,
       field: {value: '', name: 'test', onChange: jest.fn()},
-      form: {errors: {}, submitCount: 0},
+      form: {errors: {}, submitCount: 0, setFieldTouched: jest.fn()},
       required: false
     };
   });

diff --git a/src/utils/hasFormikErrorsAndWarnings.js b/src/utils/hasFormikErrorsAndWarnings.js
@@ -4,13 +4,18 @@ const hasFormikErrorsAndWarnings = ({form, field, warnings = {}}) => {
   const warning = getIn(warnings, field.name);
   const error = getIn(form.errors, field.name);
   const touched = getIn(form.touched, field.name);
-  const formSubmittedOrTouched = form.submitCount > 0 || touched;
+  const formSubmittedOrTouched = form.submitCount > 0 && touched;
+  if (formSubmittedOrTouched || (touched && (error || warning))) {
+    return {
+      hasError: !!error,
+      error,
+      hasWarning: !!warning,
+      warning
+    };
+  }
   return {
-    fieldMustBeCompleted: !!error,
-    hasError: !!(formSubmittedOrTouched && error),
-    error,
-    hasWarning: !!(formSubmittedOrTouched && warning),
-    warning
+    hasError: false,
+    hasWarning: false
   };
 };