Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
giavinh79 opened this issue May 18, 2024 · 2 comments
Labels
component: pickers This is the name of the generic UI component, not the React module!

Comments

@giavinh79
Copy link

giavinh79 commented May 18, 2024

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:

  • 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

@giavinh79 giavinh79 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 18, 2024
@giavinh79
Copy link
Author

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

Copy link

⚠️ 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.

@github-actions github-actions bot removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 18, 2024
@zannager zannager added the component: pickers This is the name of the generic UI component, not the React module! label May 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: pickers This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

2 participants