From adb836a9cd42b30060ab50fd3f6a122ec47477cc Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 12 Feb 2021 17:26:49 +0100
Subject: [PATCH 1/2] Fix TabbedForm Does not Display Errors in Hidden Tabs on
 Submit

---
 .../ra-ui-materialui/src/form/FormTab.tsx     | 43 +----------------
 .../src/form/FormTabHeader.tsx                | 48 +++++++++++++++++++
 2 files changed, 50 insertions(+), 41 deletions(-)
 create mode 100644 packages/ra-ui-materialui/src/form/FormTabHeader.tsx

diff --git a/packages/ra-ui-materialui/src/form/FormTab.tsx b/packages/ra-ui-materialui/src/form/FormTab.tsx
index 3cfd3271370..5871f4e0cba 100644
--- 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
new file mode 100644
index 00000000000..28ab29d5672
--- /dev/null
+++ b/packages/ra-ui-materialui/src/form/FormTabHeader.tsx
@@ -0,0 +1,48 @@
+import * as React 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);
+    form.subscribe(
+        state => {
+            if (!showError && (state.submitting || state.submitFailed)) {
+                setShowError(true);
+            }
+        },
+        { submitting: true, submitFailed: true }
+    );
+
+    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}
+        />
+    );
+};

From 54a08a254cef736799c81e62397693ece192fc2d Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Mon, 15 Feb 2021 11:03:42 +0100
Subject: [PATCH 2/2] Apply review

---
 .../src/form/FormTabHeader.tsx                | 22 ++++++++++++-------
 packages/ra-ui-materialui/src/form/index.tsx  |  1 +
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/ra-ui-materialui/src/form/FormTabHeader.tsx b/packages/ra-ui-materialui/src/form/FormTabHeader.tsx
index 28ab29d5672..9cb30a68543 100644
--- a/packages/ra-ui-materialui/src/form/FormTabHeader.tsx
+++ b/packages/ra-ui-materialui/src/form/FormTabHeader.tsx
@@ -1,4 +1,5 @@
 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';
@@ -18,14 +19,19 @@ export const FormTabHeader = ({
     const formGroup = useFormGroup(value);
     const form = useForm();
     const [showError, setShowError] = React.useState(false);
-    form.subscribe(
-        state => {
-            if (!showError && (state.submitting || state.submitFailed)) {
-                setShowError(true);
-            }
-        },
-        { submitting: true, submitFailed: true }
-    );
+
+    useEffect(() => {
+        const unsubscribe = form.subscribe(
+            state => {
+                if (!showError && (state.submitting || state.submitFailed)) {
+                    setShowError(true);
+                }
+            },
+            { submitting: true, submitFailed: true }
+        );
+
+        return unsubscribe;
+    }, [form, showError]);
 
     return (
         <MuiTab
diff --git a/packages/ra-ui-materialui/src/form/index.tsx b/packages/ra-ui-materialui/src/form/index.tsx
index a49cfb557e7..853e21d7c98 100644
--- 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,