From e76452f88879d2bade49da5e1daa7b2692ae9021 Mon Sep 17 00:00:00 2001
From: erwanMarmelab <erwan@marmelab.com>
Date: Tue, 25 Feb 2025 17:40:02 +0100
Subject: [PATCH] Make `<TabbedForm tabs>` use the onChange prop

---
 .../ra-ui-materialui/src/form/TabbedForm.spec.tsx  | 14 +++++++++++++-
 .../src/form/TabbedForm.stories.tsx                |  4 ++--
 .../ra-ui-materialui/src/form/TabbedFormView.tsx   |  3 +++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.spec.tsx b/packages/ra-ui-materialui/src/form/TabbedForm.spec.tsx
index 50efc7b9bdd..23e5f6dc231 100644
--- a/packages/ra-ui-materialui/src/form/TabbedForm.spec.tsx
+++ b/packages/ra-ui-materialui/src/form/TabbedForm.spec.tsx
@@ -20,7 +20,8 @@ import { AdminContext } from '../AdminContext';
 import { TabbedForm } from './TabbedForm';
 import { TabbedFormClasses } from './TabbedFormView';
 import { TextInput } from '../input';
-import { EncodedPaths } from './TabbedForm.stories';
+import { EncodedPaths, MultipleTabs } from './TabbedForm.stories';
+import { TabbedFormTabs } from './TabbedFormTabs';
 
 describe('<TabbedForm />', () => {
     it('should display the tabs', () => {
@@ -313,4 +314,15 @@ describe('<TabbedForm />', () => {
             expect.stringContaining(`at ${TabbedForm.name}`)
         );
     });
+
+    it('should accept a "onChange" prop on the tabs', async () => {
+        const onChange = jest.fn();
+        render(<MultipleTabs tabs={<TabbedFormTabs onChange={onChange} />} />);
+
+        await screen.findByDisplayValue('War and Peace');
+        const tabs = screen.getAllByRole('tab');
+        fireEvent.click(tabs[1]);
+        expect(onChange).toBeCalledTimes(1);
+        expect(onChange).toBeCalledWith(expect.anything(), '1'); // tab index
+    });
 });
diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx b/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx
index f25a2a304a1..5fc3b6d746f 100644
--- a/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx
+++ b/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx
@@ -71,9 +71,9 @@ export const Basic = () => (
     </Wrapper>
 );
 
-export const MultipleTabs = () => (
+export const MultipleTabs = ({ tabs }) => (
     <Wrapper>
-        <TabbedForm>
+        <TabbedForm tabs={tabs}>
             <TabbedForm.Tab label="main">
                 <TextInput source="title" />
                 <TextInput source="author" />
diff --git a/packages/ra-ui-materialui/src/form/TabbedFormView.tsx b/packages/ra-ui-materialui/src/form/TabbedFormView.tsx
index 5d156c91adb..03cb61fa8d2 100644
--- a/packages/ra-ui-materialui/src/form/TabbedFormView.tsx
+++ b/packages/ra-ui-materialui/src/form/TabbedFormView.tsx
@@ -37,6 +37,9 @@ export const TabbedFormView = (props: TabbedFormViewProps): ReactElement => {
         if (!syncWithLocation) {
             setTabValue(value);
         }
+        if (tabs.props.onChange) {
+            tabs.props.onChange(event, value);
+        }
     };
 
     const renderTabHeaders = () =>