Make <TabbedForm tabs> use the onChange prop

Author: erwanMarmelab

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
+    });
 });

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" />

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 = () =>