Skip to content

Commit 1590655

Browse files
djhidjhi
authored
Merge pull request #9037 from marmelab/fix-remove-helper-text-if-false
Prevent render InputHelperText if helperText props is false in Input components
2 parents 2684f06 + e9ac47d commit 1590655

14 files changed

Lines changed: 164 additions & 81 deletions

‎packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,8 @@ export const ArrayInput = (props: ArrayInputProps) => {
148148
</Labeled>
149149
);
150150
}
151+
const renderHelperText =
152+
helperText !== false || ((isDirty || isSubmitted) && !!error);
151153

152154
return (
153155
<Root
@@ -186,7 +188,7 @@ export const ArrayInput = (props: ArrayInputProps) => {
186188
disabled,
187189
})}
188190
</ArrayInputContext.Provider>
189-
{!!((isDirty || isSubmitted) && !!error) || helperText ? (
191+
{renderHelperText ? (
190192
<FormHelperText error={(isDirty || isSubmitted) && !!error}>
191193
<InputHelperText
192194
touched={isDirty || isSubmitted}

‎packages/ra-ui-materialui/src/input/AutocompleteInput.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -536,6 +536,10 @@ If you provided a React element for the optionText prop, you must also provide t
536536
const isOptionEqualToValue = (option, value) => {
537537
return String(getChoiceValue(option)) === String(getChoiceValue(value));
538538
};
539+
const renderHelperText =
540+
!!fetchError ||
541+
helperText !== false ||
542+
((isTouched || isSubmitted) && invalid);
539543

540544
return (
541545
<>
@@ -565,11 +569,17 @@ If you provided a React element for the optionText prop, you must also provide t
565569
((isTouched || isSubmitted) && invalid)
566570
}
567571
helperText={
568-
<InputHelperText
569-
touched={isTouched || isSubmitted || fetchError}
570-
error={error?.message || fetchError?.message}
571-
helperText={helperText}
572-
/>
572+
renderHelperText ? (
573+
<InputHelperText
574+
touched={
575+
isTouched || isSubmitted || fetchError
576+
}
577+
error={
578+
error?.message || fetchError?.message
579+
}
580+
helperText={helperText}
581+
/>
582+
) : null
573583
}
574584
margin={margin}
575585
variant={variant}

‎packages/ra-ui-materialui/src/input/BooleanInput.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ export const BooleanInput = (props: BooleanInputProps) => {
6262
[field]
6363
);
6464

65+
const renderHelperText =
66+
helperText !== false || ((isTouched || isSubmitted) && invalid);
67+
6568
return (
6669
<FormGroup
6770
className={clsx('ra-input', `ra-input-${source}`, className)}
@@ -91,13 +94,15 @@ export const BooleanInput = (props: BooleanInputProps) => {
9194
/>
9295
}
9396
/>
94-
<FormHelperText error={(isTouched || isSubmitted) && invalid}>
95-
<InputHelperText
96-
touched={isTouched || isSubmitted}
97-
error={error?.message}
98-
helperText={helperText}
99-
/>
100-
</FormHelperText>
97+
{renderHelperText ? (
98+
<FormHelperText error={(isTouched || isSubmitted) && invalid}>
99+
<InputHelperText
100+
touched={isTouched || isSubmitted}
101+
error={error?.message}
102+
helperText={helperText}
103+
/>
104+
</FormHelperText>
105+
) : null}
101106
</FormGroup>
102107
);
103108
};

‎packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,11 @@ export const CheckboxGroupInput: FunctionComponent<CheckboxGroupInputProps> = pr
199199
);
200200
}
201201

202+
const renderHelperText =
203+
!!fetchError ||
204+
helperText !== false ||
205+
((isTouched || isSubmitted) && invalid);
206+
202207
return (
203208
<StyledFormControl
204209
component="fieldset"
@@ -235,16 +240,20 @@ export const CheckboxGroupInput: FunctionComponent<CheckboxGroupInputProps> = pr
235240
/>
236241
))}
237242
</FormGroup>
238-
<FormHelperText
239-
error={fetchError || ((isTouched || isSubmitted) && !!error)}
240-
className={CheckboxGroupInputClasses.helperText}
241-
>
242-
<InputHelperText
243-
touched={isTouched || isSubmitted || fetchError}
244-
error={error?.message || fetchError?.message}
245-
helperText={helperText}
246-
/>
247-
</FormHelperText>
243+
{renderHelperText ? (
244+
<FormHelperText
245+
error={
246+
fetchError || ((isTouched || isSubmitted) && !!error)
247+
}
248+
className={CheckboxGroupInputClasses.helperText}
249+
>
250+
<InputHelperText
251+
touched={isTouched || isSubmitted || fetchError}
252+
error={error?.message || fetchError?.message}
253+
helperText={helperText}
254+
/>
255+
</FormHelperText>
256+
) : null}
248257
</StyledFormControl>
249258
);
250259
};

‎packages/ra-ui-materialui/src/input/DateInput.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,8 @@ export const DateInput = ({
6262

6363
const { error, invalid, isTouched } = fieldState;
6464
const { isSubmitted } = formState;
65+
const renderHelperText =
66+
helperText !== false || ((isTouched || isSubmitted) && invalid);
6567

6668
return (
6769
<TextField
@@ -74,11 +76,13 @@ export const DateInput = ({
7476
margin={margin}
7577
error={(isTouched || isSubmitted) && invalid}
7678
helperText={
77-
<InputHelperText
78-
touched={isTouched || isSubmitted}
79-
error={error?.message}
80-
helperText={helperText}
81-
/>
79+
renderHelperText ? (
80+
<InputHelperText
81+
touched={isTouched || isSubmitted}
82+
error={error?.message}
83+
helperText={helperText}
84+
/>
85+
) : null
8286
}
8387
label={
8488
<FieldTitle

‎packages/ra-ui-materialui/src/input/DateTimeInput.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ export const DateTimeInput = ({
5151

5252
const { error, invalid, isTouched } = fieldState;
5353
const { isSubmitted } = formState;
54-
54+
const renderHelperText =
55+
helperText !== false || ((isTouched || isSubmitted) && invalid);
5556
return (
5657
<TextField
5758
id={id}
@@ -63,11 +64,13 @@ export const DateTimeInput = ({
6364
margin={margin}
6465
error={(isTouched || isSubmitted) && invalid}
6566
helperText={
66-
<InputHelperText
67-
touched={isTouched || isSubmitted}
68-
error={error?.message}
69-
helperText={helperText}
70-
/>
67+
renderHelperText ? (
68+
<InputHelperText
69+
touched={isTouched || isSubmitted}
70+
error={error?.message}
71+
helperText={helperText}
72+
/>
73+
) : null
7174
}
7275
label={
7376
<FieldTitle

‎packages/ra-ui-materialui/src/input/FileInput.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,9 @@ export const FileInput = (props: FileInputProps) => {
147147
onDrop,
148148
});
149149

150+
const renderHelperText =
151+
helperText !== false || ((isTouched || isSubmitted) && invalid);
152+
150153
return (
151154
<StyledLabeled
152155
htmlFor={id}
@@ -180,13 +183,18 @@ export const FileInput = (props: FileInputProps) => {
180183
<p>{translate(labelSingle)}</p>
181184
)}
182185
</div>
183-
<FormHelperText error={(isTouched || isSubmitted) && invalid}>
184-
<InputHelperText
185-
touched={isTouched || isSubmitted}
186-
error={error?.message}
187-
helperText={helperText}
188-
/>
189-
</FormHelperText>
186+
{renderHelperText ? (
187+
<FormHelperText
188+
error={(isTouched || isSubmitted) && invalid}
189+
>
190+
<InputHelperText
191+
touched={isTouched || isSubmitted}
192+
error={error?.message}
193+
helperText={helperText}
194+
/>
195+
</FormHelperText>
196+
) : null}
197+
190198
{children && (
191199
<div className="previews">
192200
{files.map((file, index) => (

‎packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ export const NullableBooleanInput = (props: NullableBooleanInputProps) => {
4848
validate,
4949
...rest,
5050
});
51-
51+
const renderHelperText =
52+
helperText !== false || ((isTouched || isSubmitted) && invalid);
5253
return (
5354
<StyledTextField
5455
id={id}
@@ -72,11 +73,13 @@ export const NullableBooleanInput = (props: NullableBooleanInputProps) => {
7273
}
7374
error={(isTouched || isSubmitted) && invalid}
7475
helperText={
75-
<InputHelperText
76-
touched={isTouched || isSubmitted}
77-
error={error?.message}
78-
helperText={helperText}
79-
/>
76+
renderHelperText ? (
77+
<InputHelperText
78+
touched={isTouched || isSubmitted}
79+
error={error?.message}
80+
helperText={helperText}
81+
/>
82+
) : null
8083
}
8184
variant={variant}
8285
{...sanitizeInputRestProps(rest)}

‎packages/ra-ui-materialui/src/input/NumberInput.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,9 @@ export const NumberInput = ({
118118
setValue(value => (value !== stringValue ? stringValue : value));
119119
};
120120

121+
const renderHelperText =
122+
helperText !== false || ((isTouched || isSubmitted) && invalid);
123+
121124
return (
122125
<TextField
123126
id={id}
@@ -133,11 +136,13 @@ export const NumberInput = ({
133136
variant={variant}
134137
error={(isTouched || isSubmitted) && invalid}
135138
helperText={
136-
<InputHelperText
137-
touched={isTouched || isSubmitted}
138-
error={error?.message}
139-
helperText={helperText}
140-
/>
139+
renderHelperText ? (
140+
<InputHelperText
141+
touched={isTouched || isSubmitted}
142+
error={error?.message}
143+
helperText={helperText}
144+
/>
145+
) : null
141146
}
142147
label={
143148
<FieldTitle

‎packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,12 @@ export const RadioButtonGroupInput = (props: RadioButtonGroupInputProps) => {
158158
</Labeled>
159159
);
160160
}
161+
162+
const renderHelperText =
163+
!!fetchError ||
164+
helperText !== false ||
165+
((isTouched || isSubmitted) && invalid);
166+
161167
return (
162168
<StyledFormControl
163169
component="fieldset"
@@ -196,13 +202,15 @@ export const RadioButtonGroupInput = (props: RadioButtonGroupInputProps) => {
196202
/>
197203
))}
198204
</RadioGroup>
199-
<FormHelperText>
200-
<InputHelperText
201-
touched={isTouched || isSubmitted || fetchError}
202-
error={error?.message || fetchError?.message}
203-
helperText={helperText}
204-
/>
205-
</FormHelperText>
205+
{renderHelperText ? (
206+
<FormHelperText>
207+
<InputHelperText
208+
touched={isTouched || isSubmitted || fetchError}
209+
error={error?.message || fetchError?.message}
210+
helperText={helperText}
211+
/>
212+
</FormHelperText>
213+
) : null}
206214
</StyledFormControl>
207215
);
208216
};

0 commit comments

Comments
 (0)