[TextField] Fix to handle onClick on root element (mui#38072)

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

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

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

@@ -243,4 +243,13 @@ 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);
+  });
 });

test/e2e/fixtures/TextField/TextFieldWithOnClick.tsx

@@ -0,0 +1,17 @@
+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);
+      }}
+    />
+  );
+}

test/e2e/index.test.ts

@@ -254,4 +254,14 @@ 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');
+    });
+  });
 });