Merge pull request #7693 from marmelab/7678-mui-selected-applied-to-t…

…abbedshowlayout-tabs-but-not-tabbedform-tabs Fix FormTab MUI props pass through
marmelab · May 16, 2022 · 5c7fa25 · 5c7fa25
2 parents 384de3c + e3f139d
commit 5c7fa25
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git 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
@@ -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;