[TextField] Fix onClick regressions handling changes

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

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

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.
    */

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,
@@ -147,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;
@@ -179,7 +169,6 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
       onBlur={onBlur}
       onChange={onChange}
       onFocus={onFocus}
-      onClick={handleClick}
       placeholder={placeholder}
       inputProps={inputProps}
       {...InputMore}
@@ -198,7 +187,6 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
       color={color}
       variant={variant}
       ownerState={ownerState}
-      onClick={handleClick}
       {...other}
     >
       {label != null && label !== '' && (
@@ -358,10 +346,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
    */

packages/mui-material/src/TextField/TextField.test.js

@@ -155,22 +155,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 = [
@@ -244,12 +228,22 @@ describe('<TextField />', () => {
     });
   });
 
-  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);
+  describe('event: click', () => {
+    it('registers `onClick` on the root slot', () => {
+      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(input);
+
+      expect(handleClick.callCount).to.equal(1);
+      // return value is event.currentTarget
+      expect(handleClick.returned(root));
+    });
   });
 });

test/e2e/fixtures/TextField/TextFieldWithOnClick.tsx → test/e2e/fixtures/TextField/OutlinedTextFieldOnClick.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import TextField from '@mui/material/TextField';
 
-export default function TextFieldWithOnClick() {
+export default function OutlinedTextFieldOnClick() {
   const [isClicked, setIsClicked] = React.useState(false);
   return (
     <TextField

test/e2e/index.test.ts

@@ -256,12 +256,13 @@ describe('e2e', () => {
   });
 
   describe('<TextField />', () => {
-    it('should handle `onClick` when clicking on the focused label position', async () => {
-      await renderFixture('TextField/TextFieldWithOnClick');
+    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 } });
-      await page.waitForSelector('.MuiInputBase-root.Mui-error');
+      const errorSelector = page.locator('.MuiInputBase-root.Mui-error');
+      await errorSelector.waitFor();
     });
   });
 });