GenericInput: cast nullish values for input types to undefined

This commit is contained in:
Gustav Hansen 2022-03-17 15:16:31 +01:00
parent 4da9e8a8dc
commit 43b2108643

View File

@ -38,7 +38,7 @@ const GenericInput = ({
required, required,
step, step,
type, type,
value, value: defaultValue,
isNullable, isNullable,
...rest ...rest
}) => { }) => {
@ -47,6 +47,10 @@ const GenericInput = ({
const CustomInput = customInputs ? customInputs[type] : null; const CustomInput = customInputs ? customInputs[type] : null;
// the API always returns null, which throws an error in React,
// therefore we cast this case to undefined
const value = defaultValue ?? undefined;
if (CustomInput) { if (CustomInput) {
return ( return (
<CustomInput <CustomInput
@ -109,7 +113,7 @@ const GenericInput = ({
return ( return (
<ToggleInput <ToggleInput
checked={value === null ? null : value || false} checked={defaultValue === null ? null : defaultValue || false}
disabled={disabled} disabled={disabled}
hint={hint} hint={hint}
label={label} label={label}
@ -170,7 +174,7 @@ const GenericInput = ({
onClear={() => onChange({ target: { name, value: null, type } })} onClear={() => onChange({ target: { name, value: null, type } })}
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
required={required} required={required}
value={value ? new Date(value) : null} value={value && new Date(value)}
selectedDateLabel={formattedDate => `Date picker, current is ${formattedDate}`} selectedDateLabel={formattedDate => `Date picker, current is ${formattedDate}`}
/> />
); );
@ -221,7 +225,7 @@ const GenericInput = ({
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
required={required} required={required}
step={step} step={step}
value={value ?? null} value={value}
/> />
); );
} }
@ -240,7 +244,7 @@ const GenericInput = ({
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
required={required} required={required}
type="email" type="email"
value={value || ''} value={value}
/> />
); );
} }
@ -261,7 +265,7 @@ const GenericInput = ({
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
required={required} required={required}
type="text" type="text"
value={value || ''} value={value}
/> />
); );
} }
@ -303,7 +307,7 @@ const GenericInput = ({
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
required={required} required={required}
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
value={value || ''} value={value}
/> />
); );
} }
@ -322,7 +326,7 @@ const GenericInput = ({
}} }}
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
required={required} required={required}
value={value || ''} value={value}
> >
{options.map(({ metadatas: { intlLabel, disabled, hidden }, key, value }) => { {options.map(({ metadatas: { intlLabel, disabled, hidden }, key, value }) => {
return ( return (
@ -348,7 +352,7 @@ const GenericInput = ({
required={required} required={required}
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
type={type} type={type}
value={value || ''} value={value}
> >
{value} {value}
</Textarea> </Textarea>
@ -415,7 +419,7 @@ GenericInput.defaultProps = {
required: false, required: false,
options: [], options: [],
step: 1, step: 1,
value: '', value: undefined,
}; };
GenericInput.propTypes = { GenericInput.propTypes = {