[TextField] Fix running click event on disabled

[sai6855]

closes #36867

before : https://codesandbox.io/s/zen-meadow-lr2flp?file=/demo.tsx
after : https://codesandbox.io/s/beautiful-panka-24o4h2?file=/demo.tsx

Actual issue lies in TextField component not in Autocomplete. Right now onClick event of TextField runs even if TextField is disabled. This PR fixes it.

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-36892--material-ui.netlify.app/

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 7854792

[mj12albert]

👍 Thanks, sorry I didn't get to this before this week's release 🙏 @sai6855

[sai6855]

@mj12albert no problem :)

[oliviertassinari]

I suspect #36867 should be fixed in the Autocomplete, hence this PR is not going in the right direction: #36892 (comment).

[oliviertassinari]

Why? It's not clear if it's the desired behavior:

export default function App() {
  return (
    <div
      onClick={() => {
        console.log("root");
      }}
    >
      <input
        disabled
        onClick={() => {
          console.log("input");
        }}
      />
    </div>
  );
}

https://codesandbox.io/s/amazing-banzai-xc225m?file=/src/App.js

[mj12albert]

🤔 This looked ok to me as a plain <input> doesn't fire onClick when it's disabled: https://codesandbox.io/s/async-https-n9x4y3-onclick-disabled-n9x4y3 @oliviertassinari

[oliviertassinari]

But there can be startAdornment, endAdornment, and renderSuffix. IMHO, we shouldn't try to make InputBase behave like an input because it's not: it's a root > input like structure. Instead, if we were to stay close to the normal DOM behavior we would avoid surprises for people that are familiar with the platform behavior.

[mj12albert]

we shouldn't try to make InputBase behave like an input because it's not

OK this makes sense 👌 will try to find a fix within Autocomplete

[oliviertassinari]

To complement, #36892 (comment).

I didn't realize this also changed <TextField onClick> behavior mui/mui-x#9386 (comment). For this, one, it's a lot clearer (the InputBase can be subjective), no, props should be spread on the root element, unless they absolutely should be on a lower element, which is not the case here. It's even more true if we don't document the behavior, which we didn't with @ignore.

A clear example:

import * as React from "react";
import TextField from "@mui/material/TextField";

export default function BasicTextFields() {
  return (
    <TextField
      onClick={() => {
        console.log("textField");
      }}
      helperText="hello"
    />
  );
}

https://codesandbox.io/s/autumn-http-cn5nrc?file=/Demo.tsx:0-257 clicking on the helper text doesn't trigger the onClick listener anymore ❌.