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', () => {