From 9118505019c3f9c2b3a837d78e582a101b135ffa Mon Sep 17 00:00:00 2001
From: sai chand <60743144+sai6855@users.noreply.github.com>
Date: Tue, 25 Apr 2023 23:04:40 +0530
Subject: [PATCH] [TextField] fix running click event on disabled (#36892)

---
 .../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, 29 insertions(+), 3 deletions(-)

diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
index 789ec3e5102e19..25eb66757eb7bf 100644
--- 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
index a1d2a1fd268585..3833621c0909be 100644
--- 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
index 6b1c0edd84bde6..1d408bed99fa95 100644
--- 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
index 8987dcd335089c..1891e41b9df46b 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';
@@ -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 = [