[pickers] Picker doesn't open when clicking on label position (& mouse up vs. mouse down)

[cherniavskii]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/sweet-voice-6g6cyk?file=/demo.tsx

Steps:

1. Click on the text field in the area between the placeholder and the top border

Current behavior 😯

Depending on the click position, the picker might not open:

date-range-picker-click.mov

Expected behavior 🤔

The picker should open regardless of the click position

Context 🔦

I think it only happens when clicking over the hidden label:

Interestingly, I can reproduce the issue in Chrome and Safari, but not in Firefox.

---

Also, I checked if the Autocomplete component suffers from the same issue, but it doesn't: https://mui.com/material-ui/react-autocomplete/#combo-box

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID or Support key 💳 (optional)

No response

[LukasTy]

Thank you for opening this issue! 🙏
It looks like a regression as compared to v5.
From the initial exploration, it looks like we are not providing props the the TextField components in the most correct manner after the refactoring. 🙈

[LukasTy]

It looks like we have the same regression for the regular pickers as well. 🙈

P.S. The regression practically negates the following fix: #6074

[LukasTy]

Well, this has been an adventure... 🙈
I've finally been able to narrow down the cause of regression: mui/material-ui#36892. After this change, the onClick passed to the TextField component no longer gets applied to the root element, but only the input element thus negating our solution of passing the onClick callback to the root element to trigger opening of the picker even when clicked on the invisible future label area. 🤔

[cherniavskii]

Interesting, I'm curious why Autocomplete is not affected?

[LukasTy]

Because they are using onMouseDown instead of onClick. 🙈
We've gone with the same approach initially, until it proved problematic with the TimeClock.