From 3455c42ba855ba803a42ae5f6b1a851a8f6d6386 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 29 Feb 2024 18:27:50 +0200
Subject: [PATCH 1/2] [material-ui][Tooltip] Support event handlers with extra
 parameters

---
 packages/mui-material/src/Tooltip/Tooltip.js  |  6 +--
 .../mui-material/src/Tooltip/Tooltip.test.js  | 39 +++++++++++++++++++
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js
index 88d6d7e563d55b..08ce55a22e04bc 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.js
@@ -223,11 +223,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 c47cfcc379085f..ded3e939dc8fd2 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.test.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.test.js
@@ -962,6 +962,45 @@ describe('<Tooltip />', () => {
       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 (
+          <div ref={ref} {...other}>
+            <input
+              type="text"
+              onFocus={(event) => onFocus(event, 'focus')}
+              onBlur={(event) => onBlur(event, 'blur', 1)}
+            />
+          </div>
+        );
+      });
+      render(
+        <Tooltip open title="test">
+          <TextField onFocus={handleFocus} onBlur={handleBlur} variant="standard" />
+        </Tooltip>,
+      );
+      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', () => {

From 14c47d1420114d4eb66db2c1f0e4d98097e34b33 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 29 Feb 2024 18:39:55 +0200
Subject: [PATCH 2/2] [joy-ui][Tooltip] Support event handlers with extra
 parameters

---
 packages/mui-joy/src/Tooltip/Tooltip.test.tsx | 50 ++++++++++++++++++-
 packages/mui-joy/src/Tooltip/Tooltip.tsx      | 10 ++--
 2 files changed, 54 insertions(+), 6 deletions(-)

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('<Tooltip />', () => {
       });
     });
   });
+
+  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 (
+          <div ref={ref} {...other}>
+            <input
+              type="text"
+              onFocus={(event) => onFocus(event, 'focus')}
+              onBlur={(event) => onBlur(event, 'blur', 1)}
+            />
+          </div>
+        );
+      });
+      const { getByRole } = render(
+        <Tooltip open title="test">
+          <TextField onFocus={handleFocus} onBlur={handleBlur} />
+        </Tooltip>,
+      );
+      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<HTMLElement>) => void,
-  eventHandler: (event: React.FocusEvent<HTMLElement>) => void,
+  handler: (event: React.FocusEvent<HTMLElement>, ...params: any[]) => void,
+  eventHandler: (event: React.FocusEvent<HTMLElement>, ...params: any[]) => void,
 ) {
-  return (event: React.FocusEvent<HTMLElement>) => {
+  return (event: React.FocusEvent<HTMLElement>, ...params: any[]) => {
     if (eventHandler) {
-      eventHandler(event);
+      eventHandler(event, ...params);
     }
-    handler(event);
+    handler(event, ...params);
   };
 }
 /**