Merge pull request #5903 from marmelab/fix-tabbedform-error-display-o…

…nsubmit Fix TabbedForm Does not Display Errors in Hidden Tabs on Submit
marmelab · Feb 15, 2021 · 0859039 · 0859039
2 parents 5287e91 + 54a08a2
commit 0859039
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 41 deletions.
diff --git a/packages/ra-ui-materialui/src/form/FormTab.tsx b/packages/ra-ui-materialui/src/form/FormTab.tsx
@@ -1,17 +1,10 @@
 import * as React from 'react';
 import { FC, ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { Link, useLocation } from 'react-router-dom';
-import MuiTab from '@material-ui/core/Tab';
-import classnames from 'classnames';
-import {
-    FormGroupContextProvider,
-    useTranslate,
-    Record,
-    useFormGroup,
-} from 'ra-core';
+import { FormGroupContextProvider, Record } from 'ra-core';
 
 import FormInput from './FormInput';
+import { FormTabHeader } from './FormTabHeader';
 
 const hiddenStyle = { display: 'none' };
 
@@ -73,38 +66,6 @@ const FormTab: FC<FormTabProps> = ({
     return intent === 'header' ? renderHeader() : renderContent();
 };
 
-export const FormTabHeader = ({
-    classes,
-    label,
-    value,
-    icon,
-    className,
-    ...rest
-}) => {
-    const translate = useTranslate();
-    const location = useLocation();
-    const formGroup = useFormGroup(value);
-
-    return (
-        <MuiTab
-            label={translate(label, { _: label })}
-            value={value}
-            icon={icon}
-            className={classnames('form-tab', className, {
-                [classes.errorTabButton]:
-                    formGroup.invalid &&
-                    formGroup.touched &&
-                    location.pathname !== value,
-            })}
-            component={Link}
-            to={{ ...location, pathname: value }}
-            id={`tabheader-${value}`}
-            aria-controls={`tabpanel-${value}`}
-            {...rest}
-        />
-    );
-};
-
 FormTab.propTypes = {
     basePath: PropTypes.string,
     className: PropTypes.string,

diff --git a/packages/ra-ui-materialui/src/form/FormTabHeader.tsx b/packages/ra-ui-materialui/src/form/FormTabHeader.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import MuiTab from '@material-ui/core/Tab';
+import classnames from 'classnames';
+import { useTranslate, useFormGroup } from 'ra-core';
+import { useForm } from 'react-final-form';
+
+export const FormTabHeader = ({
+    classes,
+    label,
+    value,
+    icon,
+    className,
+    ...rest
+}) => {
+    const translate = useTranslate();
+    const location = useLocation();
+    const formGroup = useFormGroup(value);
+    const form = useForm();
+    const [showError, setShowError] = React.useState(false);
+
+    useEffect(() => {
+        const unsubscribe = form.subscribe(
+            state => {
+                if (!showError && (state.submitting || state.submitFailed)) {
+                    setShowError(true);
+                }
+            },
+            { submitting: true, submitFailed: true }
+        );
+
+        return unsubscribe;
+    }, [form, showError]);
+
+    return (
+        <MuiTab
+            label={translate(label, { _: label })}
+            value={value}
+            icon={icon}
+            className={classnames('form-tab', className, {
+                [classes.errorTabButton]:
+                    formGroup.invalid &&
+                    (formGroup.touched || showError) &&
+                    location.pathname !== value,
+            })}
+            component={Link}
+            to={{ ...location, pathname: value }}
+            id={`tabheader-${value}`}
+            aria-controls={`tabpanel-${value}`}
+            {...rest}
+        />
+    );
+};
diff --git a/packages/ra-ui-materialui/src/form/index.tsx b/packages/ra-ui-materialui/src/form/index.tsx
@@ -8,6 +8,7 @@ import TabbedForm, { TabbedFormProps } from './TabbedForm';
 import TabbedFormTabs from './TabbedFormTabs';
 import Toolbar, { ToolbarProps } from './Toolbar';
 import getFormInitialValues from './getFormInitialValues';
+export * from './FormTabHeader';
 
 export type {
     SimpleFormProps,