[TextField] fix running click event on disabled (mui#36892)

mj12albert · Apr 25, 2023 · 9118505 · 9118505
1 parent 5b7e9c5
commit 9118505
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 3 deletions.
diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
@@ -439,8 +439,7 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
     if (inputRef.current && event.currentTarget === event.target) {
       inputRef.current.focus();
     }
-
-    if (onClick) {
+    if (onClick && !fcs.disabled) {
       onClick(event);
     }
   };

diff --git a/packages/mui-material/src/TextField/TextField.d.ts b/packages/mui-material/src/TextField/TextField.d.ts
@@ -111,6 +111,10 @@ 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
@@ -94,6 +94,7 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
     name,
     onBlur,
     onChange,
+    onClick,
     onFocus,
     placeholder,
     required = false,
@@ -168,6 +169,7 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
       onBlur={onBlur}
       onChange={onChange}
       onFocus={onFocus}
+      onClick={onClick}
       placeholder={placeholder}
       inputProps={inputProps}
       {...InputMore}
@@ -345,6 +347,10 @@ 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
@@ -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';
@@ -154,6 +155,22 @@ 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 = [