From a33fcdf5a5d0fcfee4d91447930b354702c4c775 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Mon, 14 Aug 2023 23:38:30 +0800
Subject: [PATCH 1/7] Revert "[TextField] fix running click event on disabled
 (#36892)"

This reverts commit 9118505019c3f9c2b3a837d78e582a101b135ffa.
---
 .../mui-material/src/InputBase/InputBase.js   |  3 ++-
 .../mui-material/src/TextField/TextField.d.ts |  4 ----
 .../mui-material/src/TextField/TextField.js   |  6 ------
 .../src/TextField/TextField.test.js           | 19 +------------------
 4 files changed, 3 insertions(+), 29 deletions(-)

diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
index 6f948212ec8afc..90d0b3a40851ea 100644
--- a/packages/mui-material/src/InputBase/InputBase.js
+++ b/packages/mui-material/src/InputBase/InputBase.js
@@ -440,7 +440,8 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
     if (inputRef.current && event.currentTarget === event.target) {
       inputRef.current.focus();
     }
-    if (onClick && !fcs.disabled) {
+
+    if (onClick) {
       onClick(event);
     }
   };
diff --git a/packages/mui-material/src/TextField/TextField.d.ts b/packages/mui-material/src/TextField/TextField.d.ts
index 468affd862e276..33b83fb1c04450 100644
--- a/packages/mui-material/src/TextField/TextField.d.ts
+++ b/packages/mui-material/src/TextField/TextField.d.ts
@@ -111,10 +111,6 @@ export interface BaseTextFieldProps
   name?: string;
   onBlur?: InputBaseProps['onBlur'];
   onFocus?: StandardInputProps['onFocus'];
-  /**
-   * @ignore
-   */
-  onClick?: InputBaseProps['onClick'];
   /**
    * The short hint displayed in the `input` before the user enters a value.
    */
diff --git a/packages/mui-material/src/TextField/TextField.js b/packages/mui-material/src/TextField/TextField.js
index 2448ce22274d89..c41caa67fe3020 100644
--- a/packages/mui-material/src/TextField/TextField.js
+++ b/packages/mui-material/src/TextField/TextField.js
@@ -95,7 +95,6 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
     name,
     onBlur,
     onChange,
-    onClick,
     onFocus,
     placeholder,
     required = false,
@@ -179,7 +178,6 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
       onBlur={onBlur}
       onChange={onChange}
       onFocus={onFocus}
-      onClick={handleClick}
       placeholder={placeholder}
       inputProps={inputProps}
       {...InputMore}
@@ -358,10 +356,6 @@ TextField.propTypes /* remove-proptypes */ = {
    * You can pull out the new value by accessing `event.target.value` (string).
    */
   onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
   /**
    * @ignore
    */
diff --git a/packages/mui-material/src/TextField/TextField.test.js b/packages/mui-material/src/TextField/TextField.test.js
index 18b3b0e5d61829..49c1c48fd63af7 100644
--- a/packages/mui-material/src/TextField/TextField.test.js
+++ b/packages/mui-material/src/TextField/TextField.test.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
-import { createRenderer, describeConformance, fireEvent } from 'test/utils';
+import { createRenderer, describeConformance } from 'test/utils';
 import FormControl from '@mui/material/FormControl';
 import { inputBaseClasses } from '@mui/material/InputBase';
 import MenuItem from '@mui/material/MenuItem';
@@ -155,22 +154,6 @@ describe('<TextField />', () => {
     });
   });
 
-  describe('prop: disabled', () => {
-    it('should not run click event when disabled', () => {
-      const handleClick = spy();
-      const { getByRole } = render(<TextField disabled onClick={handleClick} />);
-      fireEvent.click(getByRole('textbox'));
-      expect(handleClick.callCount).to.equal(0);
-    });
-
-    it('should not run click event when disabled and when onClick prop is set through InputProps', () => {
-      const handleClick = spy();
-      const { getByRole } = render(<TextField disabled InputProps={{ onClick: handleClick }} />);
-      fireEvent.click(getByRole('textbox'));
-      expect(handleClick.callCount).to.equal(0);
-    });
-  });
-
   describe('prop: select', () => {
     it('can render a <select /> when `native`', () => {
       const currencies = [

From a86d98b9144c82c3f0c20a615701c7f9296f9a96 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Mon, 14 Aug 2023 23:39:15 +0800
Subject: [PATCH 2/7] Revert "[TextField] Fix to handle `onClick` on root
 element (#38072)"

This reverts commit 113429c777a739b2f0218997d4f03fe52eb2aea3.
---
 .../mui-material/src/TextField/TextField.js     | 10 ----------
 .../src/TextField/TextField.test.js             |  9 ---------
 .../fixtures/TextField/TextFieldWithOnClick.tsx | 17 -----------------
 test/e2e/index.test.ts                          | 10 ----------
 4 files changed, 46 deletions(-)
 delete mode 100644 test/e2e/fixtures/TextField/TextFieldWithOnClick.tsx

diff --git a/packages/mui-material/src/TextField/TextField.js b/packages/mui-material/src/TextField/TextField.js
index c41caa67fe3020..df210682e3412c 100644
--- a/packages/mui-material/src/TextField/TextField.js
+++ b/packages/mui-material/src/TextField/TextField.js
@@ -146,15 +146,6 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
     InputMore['aria-describedby'] = undefined;
   }
 
-  const handleClick = (event) => {
-    if (!disabled && onClick) {
-      // The `onClick` is registered both on the root and the input elements.
-      // Without stopping the propagation, the event could be triggered twice.
-      event.stopPropagation();
-      onClick(event);
-    }
-  };
-
   const id = useId(idOverride);
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;
@@ -196,7 +187,6 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
       color={color}
       variant={variant}
       ownerState={ownerState}
-      onClick={handleClick}
       {...other}
     >
       {label != null && label !== '' && (
diff --git a/packages/mui-material/src/TextField/TextField.test.js b/packages/mui-material/src/TextField/TextField.test.js
index 49c1c48fd63af7..8987dcd335089c 100644
--- a/packages/mui-material/src/TextField/TextField.test.js
+++ b/packages/mui-material/src/TextField/TextField.test.js
@@ -226,13 +226,4 @@ describe('<TextField />', () => {
       expect(getByRole('button')).toHaveAccessibleDescription('Foo bar');
     });
   });
-
-  it('should trigger `onClick` only once', () => {
-    const handleClick = spy();
-    const { getByRole } = render(
-      <TextField variant="outlined" label="Test" onClick={handleClick} />,
-    );
-    fireEvent.click(getByRole('textbox'));
-    expect(handleClick.callCount).to.equal(1);
-  });
 });
diff --git a/test/e2e/fixtures/TextField/TextFieldWithOnClick.tsx b/test/e2e/fixtures/TextField/TextFieldWithOnClick.tsx
deleted file mode 100644
index 935d316c40fd98..00000000000000
--- a/test/e2e/fixtures/TextField/TextFieldWithOnClick.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-import TextField from '@mui/material/TextField';
-
-export default function TextFieldWithOnClick() {
-  const [isClicked, setIsClicked] = React.useState(false);
-  return (
-    <TextField
-      id="outlined-basic"
-      label="Outlined"
-      error={isClicked}
-      variant="outlined"
-      onClick={() => {
-        setIsClicked(true);
-      }}
-    />
-  );
-}
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
index 0ead9450c22cbc..41ee58e532f1d8 100644
--- a/test/e2e/index.test.ts
+++ b/test/e2e/index.test.ts
@@ -254,14 +254,4 @@ describe('e2e', () => {
       expect(pageErrors.length).to.equal(0);
     });
   });
-
-  describe('<TextField />', () => {
-    it('should handle `onClick` when clicking on the focused label position', async () => {
-      await renderFixture('TextField/TextFieldWithOnClick');
-
-      // execute the click on the focused label position
-      await page.getByRole('textbox').click({ position: { x: 10, y: 10 } });
-      await page.waitForSelector('.MuiInputBase-root.Mui-error');
-    });
-  });
 });

From 6271e504dadf2c4aff74d43124ce6a64eb68181b Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Tue, 15 Aug 2023 20:30:59 +0800
Subject: [PATCH 3/7] Add test for clicking on TextField focused label position

---
 .../TextField/OutlinedTextFieldOnClick.tsx      | 17 +++++++++++++++++
 test/e2e/index.test.ts                          | 11 +++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 test/e2e/fixtures/TextField/OutlinedTextFieldOnClick.tsx

diff --git a/test/e2e/fixtures/TextField/OutlinedTextFieldOnClick.tsx b/test/e2e/fixtures/TextField/OutlinedTextFieldOnClick.tsx
new file mode 100644
index 00000000000000..c334cba11fb4d0
--- /dev/null
+++ b/test/e2e/fixtures/TextField/OutlinedTextFieldOnClick.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+
+export default function OutlinedTextFieldOnClick() {
+  const [isClicked, setIsClicked] = React.useState(false);
+  return (
+    <TextField
+      id="outlined-basic"
+      label="Outlined"
+      error={isClicked}
+      variant="outlined"
+      onClick={() => {
+        setIsClicked(true);
+      }}
+    />
+  );
+}
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
index 41ee58e532f1d8..817a7ec0ac4813 100644
--- a/test/e2e/index.test.ts
+++ b/test/e2e/index.test.ts
@@ -254,4 +254,15 @@ describe('e2e', () => {
       expect(pageErrors.length).to.equal(0);
     });
   });
+
+  describe('<TextField />', () => {
+    it('should fire `onClick` when clicking on the focused label position', async () => {
+      await renderFixture('TextField/OutlinedTextFieldOnClick');
+
+      // execute the click on the focused label position
+      await page.getByRole('textbox').click({ position: { x: 10, y: 10 } });
+      const errorSelector = page.locator('.MuiInputBase-root.Mui-error');
+      await errorSelector.waitFor();
+    });
+  });
 });

From 9cb72ab2a8e1d63c5ea1c508666ad6c50003a46c Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Tue, 15 Aug 2023 23:43:43 +0800
Subject: [PATCH 4/7] Add tests

---
 .../mui-material/src/InputBase/InputBase.test.js   |  8 ++++++++
 .../mui-material/src/TextField/TextField.test.js   | 14 +++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/mui-material/src/InputBase/InputBase.test.js b/packages/mui-material/src/InputBase/InputBase.test.js
index f2433ae573f7af..789df2c66cf233 100644
--- a/packages/mui-material/src/InputBase/InputBase.test.js
+++ b/packages/mui-material/src/InputBase/InputBase.test.js
@@ -129,6 +129,14 @@ describe('<InputBase />', () => {
       });
       expect(handleFocus.called).to.equal(false);
     });
+
+    it('fires the click event when the <input /> is disabled', () => {
+      const handleClick = spy();
+      const { getByRole } = render(<InputBase disabled onClick={handleClick} />);
+      const input = getByRole('textbox');
+      fireEvent.click(input);
+      expect(handleClick.callCount).to.equal(1);
+    });
   });
 
   describe('prop: readonly', () => {
diff --git a/packages/mui-material/src/TextField/TextField.test.js b/packages/mui-material/src/TextField/TextField.test.js
index 8987dcd335089c..9f127c1c2dcc8d 100644
--- a/packages/mui-material/src/TextField/TextField.test.js
+++ b/packages/mui-material/src/TextField/TextField.test.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, describeConformance } from 'test/utils';
+import { spy } from 'sinon';
+import { createRenderer, describeConformance, fireEvent } from 'test/utils';
 import FormControl from '@mui/material/FormControl';
 import { inputBaseClasses } from '@mui/material/InputBase';
 import MenuItem from '@mui/material/MenuItem';
@@ -226,4 +227,15 @@ describe('<TextField />', () => {
       expect(getByRole('button')).toHaveAccessibleDescription('Foo bar');
     });
   });
+
+  describe('click handling', () => {
+    it('should trigger `onClick` only once', () => {
+      const handleClick = spy();
+      const { getByRole } = render(
+        <TextField variant="outlined" disabled label="Test" onClick={handleClick} />,
+      );
+      fireEvent.click(getByRole('textbox'));
+      expect(handleClick.callCount).to.equal(1);
+    });
+  });
 });

From 68dc36146385387d2b3ec19b365bb856812a23d4 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Thu, 17 Aug 2023 14:59:07 +0800
Subject: [PATCH 5/7] Test onClick is registered on TextField root

---
 .../src/TextField/TextField.test.js           | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/mui-material/src/TextField/TextField.test.js b/packages/mui-material/src/TextField/TextField.test.js
index 9f127c1c2dcc8d..9cebf9b7526b65 100644
--- a/packages/mui-material/src/TextField/TextField.test.js
+++ b/packages/mui-material/src/TextField/TextField.test.js
@@ -228,7 +228,7 @@ describe('<TextField />', () => {
     });
   });
 
-  describe('click handling', () => {
+  describe('event: click', () => {
     it('should trigger `onClick` only once', () => {
       const handleClick = spy();
       const { getByRole } = render(
@@ -237,5 +237,23 @@ describe('<TextField />', () => {
       fireEvent.click(getByRole('textbox'));
       expect(handleClick.callCount).to.equal(1);
     });
+
+    it('registers `onClick` on the root slot', () => {
+      const handleClick = spy();
+      const { getByTestId } = render(
+        <TextField
+          data-testid="root"
+          onClick={handleClick}
+          inputProps={{
+            onClick: handleClick,
+          }}
+        />,
+      );
+
+      const root = getByTestId('root');
+
+      fireEvent.click(root);
+      expect(handleClick.callCount).to.equal(1);
+    });
   });
 });

From 2b2c35b97555122a33fa370c8e216c469e27ce08 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Mon, 21 Aug 2023 16:21:20 +0800
Subject: [PATCH 6/7] Update test

---
 .../src/TextField/TextField.test.js           | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/mui-material/src/TextField/TextField.test.js b/packages/mui-material/src/TextField/TextField.test.js
index 9cebf9b7526b65..0b229d8e96fe4d 100644
--- a/packages/mui-material/src/TextField/TextField.test.js
+++ b/packages/mui-material/src/TextField/TextField.test.js
@@ -239,21 +239,20 @@ describe('<TextField />', () => {
     });
 
     it('registers `onClick` on the root slot', () => {
-      const handleClick = spy();
-      const { getByTestId } = render(
-        <TextField
-          data-testid="root"
-          onClick={handleClick}
-          inputProps={{
-            onClick: handleClick,
-          }}
-        />,
+      const handleClick = spy((event) => event.currentTarget);
+      const { getByTestId, getByRole } = render(
+        <TextField data-testid="root" onClick={handleClick} />,
       );
 
+      const input = getByRole('textbox');
+
       const root = getByTestId('root');
 
-      fireEvent.click(root);
+      fireEvent.click(input);
+
       expect(handleClick.callCount).to.equal(1);
+      // return value is event.currentTarget
+      expect(handleClick.returned(root));
     });
   });
 });

From 886d3d87c598b8f291a7a5d1fa05ff8c90d906eb Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Tue, 22 Aug 2023 14:26:44 +0800
Subject: [PATCH 7/7] Remove redundant test

---
 packages/mui-material/src/TextField/TextField.test.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/mui-material/src/TextField/TextField.test.js b/packages/mui-material/src/TextField/TextField.test.js
index 0b229d8e96fe4d..b793e8f0b01f2d 100644
--- a/packages/mui-material/src/TextField/TextField.test.js
+++ b/packages/mui-material/src/TextField/TextField.test.js
@@ -229,15 +229,6 @@ describe('<TextField />', () => {
   });
 
   describe('event: click', () => {
-    it('should trigger `onClick` only once', () => {
-      const handleClick = spy();
-      const { getByRole } = render(
-        <TextField variant="outlined" disabled label="Test" onClick={handleClick} />,
-      );
-      fireEvent.click(getByRole('textbox'));
-      expect(handleClick.callCount).to.equal(1);
-    });
-
     it('registers `onClick` on the root slot', () => {
       const handleClick = spy((event) => event.currentTarget);
       const { getByTestId, getByRole } = render(