diff --git a/packages/mui-joy/src/Tooltip/Tooltip.test.tsx b/packages/mui-joy/src/Tooltip/Tooltip.test.tsx
index 72d63129e669b4..7a277704e347dd 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.test.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.test.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { spy } from 'sinon';
+import { createRenderer, act } from '@mui-internal/test-utils';
import { unstable_capitalize as capitalize } from '@mui/utils';
import { PopperProps } from '@mui/base';
import { ThemeProvider } from '@mui/joy/styles';
@@ -130,4 +131,51 @@ describe('', () => {
});
});
});
+
+ describe('focus', () => {
+ // https://github.com/mui/mui-x/issues/12248
+ it('should support event handlers with extra parameters', () => {
+ const handleFocus = spy((event, extra) => extra);
+ const handleBlur = spy((event, ...params) => params);
+
+ const TextField = React.forwardRef<
+ HTMLDivElement,
+ {
+ onFocus: (event: React.FocusEvent, ...params: any[]) => void;
+ onBlur: (event: React.FocusEvent, ...params: any[]) => void;
+ }
+ >(function TextField(props, ref) {
+ const { onFocus, onBlur, ...other } = props;
+ return (
+
+ onFocus(event, 'focus')}
+ onBlur={(event) => onBlur(event, 'blur', 1)}
+ />
+
+ );
+ });
+ const { getByRole } = render(
+
+
+ ,
+ );
+ const input = getByRole('textbox');
+
+ act(() => {
+ input.focus();
+ });
+
+ expect(handleFocus.callCount).to.equal(1);
+ expect(handleFocus.returnValues[0]).to.equal('focus');
+
+ act(() => {
+ input.blur();
+ });
+
+ expect(handleBlur.callCount).to.equal(1);
+ expect(handleBlur.returnValues[0]).to.deep.equal(['blur', 1]);
+ });
+ });
});
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx
index d8ca461789e0b6..531d3a8b288c1b 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx
@@ -179,14 +179,14 @@ function composeMouseEventHandler(
}
function composeFocusEventHandler(
- handler: (event: React.FocusEvent) => void,
- eventHandler: (event: React.FocusEvent) => void,
+ handler: (event: React.FocusEvent, ...params: any[]) => void,
+ eventHandler: (event: React.FocusEvent, ...params: any[]) => void,
) {
- return (event: React.FocusEvent) => {
+ return (event: React.FocusEvent, ...params: any[]) => {
if (eventHandler) {
- eventHandler(event);
+ eventHandler(event, ...params);
}
- handler(event);
+ handler(event, ...params);
};
}
/**
diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js
index fa17187fdbb82d..05cea653d79888 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.js
@@ -224,11 +224,11 @@ export function testReset() {
}
function composeEventHandler(handler, eventHandler) {
- return (event) => {
+ return (event, ...params) => {
if (eventHandler) {
- eventHandler(event);
+ eventHandler(event, ...params);
}
- handler(event);
+ handler(event, ...params);
};
}
diff --git a/packages/mui-material/src/Tooltip/Tooltip.test.js b/packages/mui-material/src/Tooltip/Tooltip.test.js
index 83ea7d886991a5..f63ab0555bdfdb 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.test.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.test.js
@@ -963,6 +963,45 @@ describe('', () => {
expect(handleFocus.callCount).to.equal(1);
expect(handleFocus.returned(input)).to.equal(true);
});
+
+ // https://github.com/mui/mui-x/issues/12248
+ it('should support event handlers with extra parameters', () => {
+ const handleFocus = spy((event, extra) => extra);
+ const handleBlur = spy((event, ...params) => params);
+
+ const TextField = React.forwardRef(function TextField(props, ref) {
+ const { onFocus, onBlur, ...other } = props;
+ return (
+
+ onFocus(event, 'focus')}
+ onBlur={(event) => onBlur(event, 'blur', 1)}
+ />
+
+ );
+ });
+ render(
+
+
+ ,
+ );
+ const input = screen.getByRole('textbox');
+
+ act(() => {
+ input.focus();
+ });
+
+ expect(handleFocus.callCount).to.equal(1);
+ expect(handleFocus.returnValues[0]).to.equal('focus');
+
+ act(() => {
+ input.blur();
+ });
+
+ expect(handleBlur.callCount).to.equal(1);
+ expect(handleBlur.returnValues[0]).to.deep.equal(['blur', 1]);
+ });
});
describe('warnings', () => {