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
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={() => {