From e3f139d33fc63751505390bc30dc1a8c7738c4c2 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Mon, 16 May 2022 11:13:48 +0200
Subject: [PATCH] Fix FormTab MUI props pass through

---
 .../ra-ui-materialui/src/form/FormTab.tsx     | 28 +++++++++++++++++--
 .../src/form/FormTabHeader.tsx                |  4 +--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/ra-ui-materialui/src/form/FormTab.tsx b/packages/ra-ui-materialui/src/form/FormTab.tsx
index ff7c015a6c8..68d0c811a18 100644
--- a/packages/ra-ui-materialui/src/form/FormTab.tsx
+++ b/packages/ra-ui-materialui/src/form/FormTab.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { FormGroupContextProvider } from 'ra-core';
-import { Stack, StackProps } from '@mui/material';
+import { Stack, StackProps, TabProps as MuiTabProps } from '@mui/material';
 
 import { FormTabHeader } from './FormTabHeader';
 
@@ -31,6 +31,7 @@ export const FormTab = (props: FormTabProps) => {
             className={className}
             syncWithLocation={syncWithLocation}
             onChange={onChange}
+            {...sanitizeRestProps(rest)}
         />
     );
 
@@ -70,7 +71,9 @@ FormTab.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
-export interface FormTabProps extends StackProps {
+export interface FormTabProps
+    extends Omit<StackProps, 'color'>,
+        Omit<MuiTabProps, 'children' | 'classes' | 'ref'> {
     className?: string;
     children?: ReactNode;
     contentClassName?: string;
@@ -87,3 +90,24 @@ export interface FormTabProps extends StackProps {
 FormTab.displayName = 'FormTab';
 
 const hiddenStyle = { display: 'none' };
+
+const sanitizeRestProps = ({
+    classes,
+    ref,
+    margin,
+    ...rest
+}: Omit<
+    FormTabProps,
+    | 'className'
+    | 'contentClassName'
+    | 'children'
+    | 'hidden'
+    | 'icon'
+    | 'intent'
+    | 'label'
+    | 'onChange'
+    | 'path'
+    | 'resource'
+    | 'syncWithLocation'
+    | 'value'
+>) => rest;
diff --git a/packages/ra-ui-materialui/src/form/FormTabHeader.tsx b/packages/ra-ui-materialui/src/form/FormTabHeader.tsx
index f5634f5cd28..9a9f62f1009 100644
--- a/packages/ra-ui-materialui/src/form/FormTabHeader.tsx
+++ b/packages/ra-ui-materialui/src/form/FormTabHeader.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { isValidElement, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { Link, useLocation } from 'react-router-dom';
-import { Tab as MuiTab } from '@mui/material';
+import { Tab as MuiTab, TabProps as MuiTabProps } from '@mui/material';
 import clsx from 'clsx';
 import { useTranslate, useFormGroup } from 'ra-core';
 import { useFormState } from 'react-hook-form';
@@ -50,7 +50,7 @@ export const FormTabHeader = ({
     );
 };
 
-interface FormTabHeaderProps {
+interface FormTabHeaderProps extends Omit<MuiTabProps, 'children'> {
     className?: string;
     hidden?: boolean;
     icon?: ReactElement;