yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-15 11:36:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

GenericInput: prevent controlled/ uncontrolled errors

Browse Source
This commit is contained in:
Gustav Hansen 2022-03-28 10:19:16 +02:00
parent 3bf25de33e
commit 19aeaaf7bc
1 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/core/helper-plugin/lib/src/components/GenericInput/index.js
View File

@ -51,6 +51,15 @@ const GenericInput = ({
// therefore we cast this case to undefined // therefore we cast this case to undefined
const value = defaultValue ?? 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) { if (CustomInput) {
return ( return (
<CustomInput <CustomInput
@ -128,7 +137,7 @@ const GenericInput = ({
id: 'app.components.ToggleCheckbox.on-label', id: 'app.components.ToggleCheckbox.on-label',
defaultMessage: 'True', defaultMessage: 'True',
})} })}
onChange={e => { onChange={(e) => {
onChange({ target: { name, value: e.target.checked } }); onChange({ target: { name, value: e.target.checked } });
}} }}
required={required} required={required}
@ -144,7 +153,7 @@ const GenericInput = ({
hint={hint} hint={hint}
id={name} id={name}
name={name} name={name}
onValueChange={value => { onValueChange={(value) => {
onChange({ target: { name, value } }); onChange({ target: { name, value } });
}} }}
required={required} required={required}
@ -165,7 +174,7 @@ const GenericInput = ({
id={name} id={name}
hint={hint} hint={hint}
name={name} name={name}
onChange={date => { onChange={(date) => {
const formattedDate = date.toISOString(); const formattedDate = date.toISOString();
onChange({ target: { name, value: formattedDate, type } }); onChange({ target: { name, value: formattedDate, type } });
@ -175,7 +184,7 @@ const GenericInput = ({
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
required={required} required={required}
value={value && new Date(value)} 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} id={name}
hint={hint} hint={hint}
name={name} name={name}
onChange={date => { onChange={(date) => {
onChange({ onChange({
target: { name, value: formatISO(date, { representation: 'date' }), type }, target: { name, value: formatISO(date, { representation: 'date' }), type },
}); });
@ -205,7 +214,7 @@ const GenericInput = ({
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
required={required} required={required}
selectedDate={selectedDate} selectedDate={selectedDate}
selectedDateLabel={formattedDate => `Date picker, current is ${formattedDate}`} selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
/> />
); );
} }
@ -219,7 +228,7 @@ const GenericInput = ({
id={name} id={name}
hint={hint} hint={hint}
name={name} name={name}
onValueChange={value => { onValueChange={(value) => {
onChange({ target: { name, value: value ?? null, type } }); onChange({ target: { name, value: value ?? null, type } });
}} }}
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
@ -244,7 +253,7 @@ const GenericInput = ({
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
required={required} required={required}
type="email" type="email"
value={value} value={valueWithEmptyStringFallback}
/> />
); );
} }
@ -265,7 +274,7 @@ const GenericInput = ({
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
required={required} required={required}
type="text" type="text"
value={value} value={valueWithEmptyStringFallback}
/> />
); );
} }
@ -282,7 +291,7 @@ const GenericInput = ({
defaultMessage: 'Show password', defaultMessage: 'Show password',
})} })}
onClick={() => { onClick={() => {
setShowPassword(prev => !prev); setShowPassword((prev) => !prev);
}} }}
style={{ style={{
border: 'none', border: 'none',
@ -307,7 +316,7 @@ const GenericInput = ({
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
required={required} required={required}
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
value={value} value={valueWithEmptyStringFallback}
/> />
); );
} }
@ -321,7 +330,7 @@ const GenericInput = ({
id={name} id={name}
hint={hint} hint={hint}
name={name} name={name}
onChange={value => { onChange={(value) => {
onChange({ target: { name, value: value === '' ? null : value, type: 'select' } }); onChange({ target: { name, value: value === '' ? null : value, type: 'select' } });
}} }}
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
@ -352,7 +361,7 @@ const GenericInput = ({
required={required} required={required}
placeholder={formattedPlaceholder} placeholder={formattedPlaceholder}
type={type} type={type}
value={value} value={valueWithEmptyStringFallback}
> >
{value} {value}
</Textarea> </Textarea>
@ -379,7 +388,7 @@ const GenericInput = ({
id={name} id={name}
hint={hint} hint={hint}
name={name} name={name}
onChange={time => { onChange={(time) => {
onChange({ target: { name, value: `${time}`, type } }); onChange({ target: { name, value: `${time}`, type } });
}} }}
onClear={() => { onClear={() => {