Merge pull request #5984 from marmelab/fix-form-tab-header-error-state-display

Fix FormTabHeader Error State Display

Author: fzaninotto

packages/ra-ui-materialui/src/form/FormTabHeader.tsx

@@ -7,6 +7,7 @@ import classnames from 'classnames';
 import { useTranslate, useFormGroup } from 'ra-core';
 import { useTabbedFormViewStyles } from './TabbedFormView';
 import { ClassesOverride } from '../types';
+import { useFormState } from 'react-final-form';
 
 export const FormTabHeader = ({
     classes,
@@ -19,6 +20,7 @@ export const FormTabHeader = ({
 }: FormTabHeaderProps): ReactElement => {
     const translate = useTranslate();
     const location = useLocation();
+    const { submitFailed } = useFormState(UseFormStateOptions);
     const formGroup = useFormGroup(value.toString());
     const propsForLink = {
         component: Link,
@@ -32,9 +34,7 @@ export const FormTabHeader = ({
             icon={icon}
             className={classnames('form-tab', className, {
                 [classes.errorTabButton]:
-                    formGroup.invalid &&
-                    formGroup.touched &&
-                    location.pathname !== value,
+                    formGroup.invalid && (formGroup.touched || submitFailed),
             })}
             {...(syncWithLocation ? propsForLink : {})} // to avoid TypeScript screams, see https://github.com/mui-org/material-ui/issues/9106#issuecomment-451270521
             id={`tabheader-${value}`}
@@ -44,6 +44,12 @@ export const FormTabHeader = ({
     );
 };
 
+const UseFormStateOptions = {
+    subscription: {
+        submitFailed: true,
+    },
+};
+
 interface FormTabHeaderProps {
     basePath?: string;
     className?: string;

packages/ra-ui-materialui/src/form/TabbedForm.spec.tsx

@@ -108,7 +108,37 @@ describe('<TabbedForm />', () => {
         expect(tabs[1].classList.contains('error')).toEqual(true);
     });
 
-    it('should not set the style of an active Tab button with errors', () => {
+    it('should set the style of an active Tab button with errors', () => {
+        const { getAllByRole, getByLabelText } = renderWithRedux(
+            <MemoryRouter initialEntries={['/posts/1']} initialIndex={0}>
+                <SaveContextProvider value={saveContextValue}>
+                    <TabbedForm
+                        classes={{ errorTabButton: 'error' }}
+                        resource="posts"
+                    >
+                        <FormTab label="tab1">
+                            <TextInput source="title" validate={required()} />
+                        </FormTab>
+                        <FormTab label="tab2">
+                            <TextInput
+                                source="description"
+                                validate={required()}
+                            />
+                        </FormTab>
+                    </TabbedForm>
+                </SaveContextProvider>
+            </MemoryRouter>
+        );
+
+        const tabs = getAllByRole('tab');
+        fireEvent.click(tabs[1]);
+        const input = getByLabelText('resources.posts.fields.description *');
+        fireEvent.blur(input);
+        expect(tabs[0].classList.contains('error')).toEqual(false);
+        expect(tabs[1].classList.contains('error')).toEqual(true);
+    });
+
+    it('should set the style of any Tab button with errors on submit', () => {
         const { getAllByRole, getByLabelText } = renderWithRedux(
             <MemoryRouter initialEntries={['/posts/1']} initialIndex={0}>
                 <SaveContextProvider value={saveContextValue}>
@@ -133,9 +163,10 @@ describe('<TabbedForm />', () => {
         const tabs = getAllByRole('tab');
         fireEvent.click(tabs[1]);
         const input = getByLabelText('resources.posts.fields.description');
-        fireEvent.change(input, { target: { value: 'foo' } });
         fireEvent.blur(input);
-        expect(tabs[0].classList.contains('error')).toEqual(false);
+        fireEvent.change(input, { target: { value: 'fooooooooo' } });
+        fireEvent.click(getByLabelText('ra.action.save'));
+        expect(tabs[0].classList.contains('error')).toEqual(true);
         expect(tabs[1].classList.contains('error')).toEqual(false);
     });