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

[giavinh79]

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.

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:

• close if it was open
• open if it was closed

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