fix(carbon): introduce validateOnMount

Author: rvsia

packages/carbon-component-mapper/src/files/date-picker.js

@@ -7,9 +7,9 @@ import { DatePicker as CarbonDatePicker, DatePickerInput } from 'carbon-componen
 import prepareProps from '../common/prepare-props';
 
 const DatePicker = (props) => {
-  const { input, datePickerType, meta, DatePickerProps, ...rest } = useFieldApi(prepareProps(props));
+  const { input, datePickerType, meta, DatePickerProps, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
 
-  const invalid = meta.touched && meta.error;
+  const invalid = (meta.touched || validateOnMount) && meta.error;
 
   return (
     <CarbonDatePicker {...input} datePickerType={datePickerType} {...DatePickerProps}>

packages/carbon-component-mapper/src/files/field-array.js

@@ -69,7 +69,8 @@ const FieldArray = (props) => {
     labelText,
     buttonLabels,
     noItemsMessage,
-    meta
+    meta,
+    validateOnMount
   } = useFieldApi(prepareProps(props));
 
   const buttonLabelsFinal = {
@@ -78,7 +79,7 @@ const FieldArray = (props) => {
     ...buttonLabels
   };
 
-  const invalid = meta.touched && !Array.isArray(meta.error) && meta.error;
+  const invalid = (meta.touched || validateOnMount) && !Array.isArray(meta.error) && meta.error;
 
   return (
     <FormGroup

packages/carbon-component-mapper/src/files/form-group.d.ts

@@ -8,6 +8,7 @@ export interface FormGroupInternalProps {
     label?: ReactNode;
     labelText?: ReactNode;
     description?: ReactNode;
+    validateOnMount?: boolean;
 }
 
 export type FormGroupProps = FormGroupInternalProps & UseFieldApiComponentConfig;

packages/carbon-component-mapper/src/files/select.js

@@ -163,7 +163,7 @@ ClearedSelect.propTypes = {
 };
 
 const Select = (props) => {
-  const { isMulti, isSearchable, loadOptions, input, meta, ...rest } = useFieldApi(prepareProps(props));
+  const { isMulti, isSearchable, loadOptions, input, meta, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
 
   const [loadOptionsChangeCounter, setCounter] = useState(0);
 
@@ -176,7 +176,7 @@ const Select = (props) => {
 
   const Component = isMulti && isSearchable ? ClearedMultiSelectFilterable : isMulti ? ClearedMultiSelect : ClearedSelect;
 
-  const invalidText = (meta.touched && meta.error) || '';
+  const invalidText = ((meta.touched || validateOnMount) && meta.error) || '';
 
   return (
     <DataDrivenSelect

packages/carbon-component-mapper/src/files/slider.js

@@ -7,9 +7,9 @@ import { Slider as CarbonSlider } from 'carbon-components-react';
 import prepareProps from '../common/prepare-props';
 
 const Slider = (props) => {
-  const { input, meta, isRequired, ...rest } = useFieldApi(prepareProps(props));
+  const { input, meta, isRequired, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
 
-  const invalid = meta.touched && meta.error;
+  const invalid = (meta.touched || validateOnMount) && meta.error;
 
   return (
     <CarbonSlider

packages/carbon-component-mapper/src/files/text-field.js

@@ -7,9 +7,9 @@ import { TextInput } from 'carbon-components-react';
 import prepareProps from '../common/prepare-props';
 
 const TextField = (props) => {
-  const { input, meta, ...rest } = useFieldApi(prepareProps(props));
+  const { input, meta, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
 
-  const invalid = meta.touched && meta.error;
+  const invalid = (meta.touched || validateOnMount) && meta.error;
 
   return <TextInput {...input} key={input.name} id={input.name} invalid={Boolean(invalid)} invalidText={invalid || ''} {...rest} />;
 };

packages/carbon-component-mapper/src/files/textarea.js

@@ -7,9 +7,9 @@ import { TextArea } from 'carbon-components-react';
 import prepareProps from '../common/prepare-props';
 
 const Textarea = (props) => {
-  const { input, meta, ...rest } = useFieldApi(prepareProps(props));
+  const { input, meta, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
 
-  const invalid = meta.touched && meta.error;
+  const invalid = (meta.touched || validateOnMount) && meta.error;
 
   return <TextArea {...input} key={input.name} id={input.name} invalid={Boolean(invalid)} invalidText={invalid || ''} {...rest} />;
 };

packages/carbon-component-mapper/src/files/time-picker.js

@@ -7,9 +7,9 @@ import { TimePicker as CarbonTimePicker, TimePickerSelect, SelectItem } from 'ca
 import prepareProps from '../common/prepare-props';
 
 const TimePicker = (props) => {
-  const { input, meta, twelveHoursFormat, timezones, ...rest } = useFieldApi(prepareProps(props));
+  const { input, meta, twelveHoursFormat, timezones, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
 
-  const invalid = meta.touched && meta.error;
+  const invalid = (meta.touched || validateOnMount) && meta.error;
 
   return (
     <CarbonTimePicker {...input} key={input.name} id={input.name} invalid={Boolean(invalid)} invalidText={invalid || ''} {...rest}>