Merge pull request #3735 from marmelab/fix-radio-button-group-error

[RFR] Fix RadioButtonGroupInput and CheckboxGroupInput Error Display
marmelab · Sep 25, 2019 · bb3224b · bb3224b
2 parents a78f307 + 3598961
commit bb3224b
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx
@@ -21,11 +21,11 @@ describe('<CheckboxGroupInput />', () => {
                 render={() => <CheckboxGroupInput {...defaultProps} />}
             />
         );
-        const input1 = getByLabelText('Angular');
+        const input1 = getByLabelText('Angular') as HTMLInputElement;
         expect(input1.type).toBe('checkbox');
         expect(input1.value).toBe('ang');
         expect(input1.checked).toBe(false);
-        const input2 = getByLabelText('React');
+        const input2 = getByLabelText('React') as HTMLInputElement;
         expect(input2.type).toBe('checkbox');
         expect(input2.value).toBe('rct');
         expect(input2.checked).toBe(false);
@@ -49,9 +49,9 @@ describe('<CheckboxGroupInput />', () => {
                 )}
             />
         );
-        const input1 = getByLabelText('Angular');
+        const input1 = getByLabelText('Angular') as HTMLInputElement;
         expect(input1.checked).toEqual(true);
-        const input2 = getByLabelText('React');
+        const input2 = getByLabelText('React') as HTMLInputElement;
         expect(input2.checked).toEqual(false);
     });
 
@@ -68,7 +68,8 @@ describe('<CheckboxGroupInput />', () => {
                 )}
             />
         );
-        expect(getByLabelText('Bar').value).toBe('foo');
+        const input = getByLabelText('Bar') as HTMLInputElement;
+        expect(input.value).toBe('foo');
     });
 
     it('should use optionValue including "." as value identifier', () => {
@@ -84,7 +85,8 @@ describe('<CheckboxGroupInput />', () => {
                 )}
             />
         );
-        expect(getByLabelText('Bar').value).toBe('foo');
+        const input = getByLabelText('Bar') as HTMLInputElement;
+        expect(input.value).toBe('foo');
     });
 
     it('should use optionText with a string value as text identifier', () => {
@@ -238,7 +240,7 @@ describe('<CheckboxGroupInput />', () => {
             // This validator always returns an error
             const validate = () => 'ra.validation.error';
 
-            const { queryByLabelText, queryByText } = render(
+            const { queryByLabelText, getByText } = render(
                 <Form
                     onSubmit={jest.fn}
                     validateOnBlur
@@ -250,12 +252,14 @@ describe('<CheckboxGroupInput />', () => {
                     )}
                 />
             );
-            const input = queryByLabelText('Angular');
+            const input = queryByLabelText('Angular') as HTMLInputElement;
             fireEvent.click(input);
             expect(input.checked).toBe(true);
 
             fireEvent.blur(input);
-            expect(queryByText('ra.validation.error')).not.toBeNull();
+            const error = getByText('ra.validation.error');
+            expect(error).toBeDefined();
+            expect(error.classList.contains('Mui-error')).toEqual(true);
         });
     });
 });
diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
@@ -6,11 +6,12 @@ import FormControl, { FormControlProps } from '@material-ui/core/FormControl';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import { makeStyles } from '@material-ui/core/styles';
+import { CheckboxProps } from '@material-ui/core/Checkbox';
 import { FieldTitle, useInput, InputProps, ChoicesProps } from 'ra-core';
 
 import defaultSanitizeRestProps from './sanitizeRestProps';
 import CheckboxGroupInputItem from './CheckboxGroupInputItem';
-import { CheckboxProps } from '@material-ui/core/Checkbox';
+import InputHelperText from './InputHelperText';
 
 const sanitizeRestProps = ({
     setFilter,
@@ -150,6 +151,7 @@ const CheckboxGroupInput: FunctionComponent<
         <FormControl
             component="fieldset"
             margin="normal"
+            error={touched && !!error}
             {...sanitizeRestProps(rest)}
         >
             <FormLabel component="legend" className={classes.label}>
@@ -175,8 +177,15 @@ const CheckboxGroupInput: FunctionComponent<
                     />
                 ))}
             </FormGroup>
-            {touched && error && <FormHelperText error>{error}</FormHelperText>}
-            {helperText && <FormHelperText>{helperText}</FormHelperText>}
+            {(touched && error) || helperText ? (
+                <FormHelperText>
+                    <InputHelperText
+                        touched={touched}
+                        error={error}
+                        helperText={helperText}
+                    />
+                </FormHelperText>
+            ) : null}
         </FormControl>
     );
 };

diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx
@@ -284,7 +284,9 @@ describe('<RadioButtonGroupInput />', () => {
 
             fireEvent.blur(input);
 
-            expect(getByText('ra.validation.error')).toBeDefined();
+            const error = getByText('ra.validation.error');
+            expect(error).toBeDefined();
+            expect(error.classList.contains('Mui-error')).toEqual(true);
             expect(queryByText('Can I help you?')).toBeNull();
         });
     });

diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
@@ -119,6 +119,7 @@ export const RadioButtonGroupInput: FunctionComponent<
         <FormControl
             component="fieldset"
             margin="normal"
+            error={touched && !!error}
             {...sanitizeRestProps(rest)}
         >
             <FormLabel component="legend" className={classes.label}>