mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.88k stars 1.17k forks source link

[pickers] Calendar in custom TextField variant sometimes does not open/close as expected when clicking calendar icon adornment #13169

Closed giavinh79 closed 4 weeks ago

giavinh79 commented 1 month ago

Steps to reproduce

Steps:

  1. Navigate to https://mui.com/x/react-date-pickers/custom-field/#usage-with-another-ui
  2. Keep on closing and opening the calendar by clicking on the end adornment
  3. Intermittent - but sometimes it does not close/open when you expect it to

Example gif: You can see it occur two times towards the beginning and once again towards the end. The clicks can be observed by the pressed down styling on the adornment icon. muibugcustomfield

Current behavior

When clicking the calendar icon end adornment over and over to open and close the calendar, sometimes it does not respond as expected. This seems to happen intermittently and was reproducible on Chrome and FireFox.

Expected behavior

When clicking the calendar icon adornment in the custom textfield, the calendar should always:

Context

I am working on custom components which wrap the MUI DatePicker and DateRangePicker components and leverage the slots and slotProps APIs to use a custom TextField component.

I've noticed that sometimes, when opening and closing the calendar via the icon adornment, that it does not behave as expected and have been unable to find a solution.

I am currently on the latest V6 version of MUI, specifically 6.19.9, but noticed this issue was also reproducible for me on the docs which is using version 7.5.0.

Your environment

Browser: Google Chrome Version 125.0.6422.61 OS: macOS Sonoma @mui/x-date-pickers & @mui/x-date-pickers-pro versions: 6.19.9

Search keywords: DatePicker, DateRangePicker, slots, textField, calendar, adornment

giavinh79 commented 4 weeks ago

Sorry, something was wrong with my mouse where it was double clicking randomly 😢

github-actions[bot] commented 4 weeks ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@giavinh79: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.