[TextField][InputLabel] Remove pointer-events: none property

[hbjORbj]

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

Closes #30488

Issue:

• When using TextField and its InputLabelProps prop, which is passed to InputLabel component, event handlers (e.g., onClick, onFocus) passed to InputLabelProps don't work.
• Code sandbox

Soluition:

• This is a regression from [TextField] Add "pointerEvents: none" to outline and filled variants #13040 that was created to fix an old issue.
• Simply removing pointer-events: none will fix the current issue.
• With our current implementation, even with the removal of pointer-events: none, the old issue no longer appears. Proof
• Code sandbox

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against ae3f9ce

[oliviertassinari]

👍 for doing the investigation work on why this style is here in the first place. However, while in v5 we now correctly use the for attribute to avoid the initial bug, we added the for to fix an a11y issue, it seems to be not enough. I see two changes in the new behavior:

1. On hover, we don't set the hover CSS:

2. The textbox is no longer focused on mousedown.

I would classify these two as regressions, at least very close to.

In https://deploy-preview-30493--material-ui.netlify.app/components/autocomplete/#combo-box, it's definitely a regression, the popup does no longer open on focus.

Looking at #30488 "I want to render a Tooltip wrapped help icon on the label of the outlined input.", this seems like a OK-ish use case. It's not the best UX I would argue (=> use the helper text), but still valid. What might work is to only apply this pointer-events: none CSS if the label is shrunk. Another option: we label the issue as "won't fix" and say, use the helper text, could work too I think.

[siriwatknp]

As @oliviertassinari mentioned, hover does not display style is a bug.

[hbjORbj]

@oliviertassinari @siriwatknp

What might work is to only apply this pointer-events: none CSS if the label is shrunk.

I think this is a reasonable compromise. Please check out codesandbox.

[siriwatknp]

👍 Nice fix.

[oliviertassinari]

• The fix looks good 👍.
• We might have been able to allow text selection when the label is shrunk, e.g. it's possible on https://getbootstrap.com/docs/5.1/forms/overview/#overview.
• On the Reddit demo, we regressed a little bit, the background color changes on label's hover:

https://deploy-preview-30493--material-ui.netlify.app/components/text-fields/#customization