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/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('', () => {
});
expect(handleFocus.called).to.equal(false);
});
+
+ it('fires the click event when the is disabled', () => {
+ const handleClick = spy();
+ const { getByRole } = render();
+ 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.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..df210682e3412c 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,
@@ -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
*/
diff --git a/packages/mui-material/src/TextField/TextField.test.js b/packages/mui-material/src/TextField/TextField.test.js
index 18b3b0e5d61829..b793e8f0b01f2d 100644
--- a/packages/mui-material/src/TextField/TextField.test.js
+++ b/packages/mui-material/src/TextField/TextField.test.js
@@ -155,22 +155,6 @@ describe('', () => {
});
});
- describe('prop: disabled', () => {
- it('should not run click event when disabled', () => {
- const handleClick = spy();
- const { getByRole } = render();
- 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();
- fireEvent.click(getByRole('textbox'));
- expect(handleClick.callCount).to.equal(0);
- });
- });
-
describe('prop: select', () => {
it('can render a when `native`', () => {
const currencies = [
@@ -244,12 +228,22 @@ describe('', () => {
});
});
- it('should trigger `onClick` only once', () => {
- const handleClick = spy();
- const { getByRole } = render(
- ,
- );
- 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(
+ ,
+ );
+
+ 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));
+ });
});
});
diff --git a/test/e2e/fixtures/TextField/TextFieldWithOnClick.tsx b/test/e2e/fixtures/TextField/OutlinedTextFieldOnClick.tsx
similarity index 86%
rename from test/e2e/fixtures/TextField/TextFieldWithOnClick.tsx
rename to test/e2e/fixtures/TextField/OutlinedTextFieldOnClick.tsx
index 935d316c40fd98..c334cba11fb4d0 100644
--- a/test/e2e/fixtures/TextField/TextFieldWithOnClick.tsx
+++ b/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 (
{
});
describe('', () => {
- 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();
});
});
});