Like the title says, I can't use the DatePicker component when it's being used in a material-ui dialog (fullscreen dialog, https://material-ui.com/demos/dialogs/#full-screen-dialogs).
When I click the icon to toggle the DatePicker it just "bounces" or flashes, and is immediately closed. What could cause this behaviour?
4 Answers, 1 is accepted
From what I can see the issue occurs because the Dialog is "stealing of the focus on the DatePicker". This cause the DatePicker blur to fire and to close it.
As this is submitted in the wrapper version of the component, could you please confirm if the pure React DatePicker is used or the wrapper(based on jQuery), so we can test if there is an option to prevent this undesired behavior.
Thank you in advance for cooperation.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
I was thinking something similar might be the problem, but I can't understand why it would be triggering any kind of focus or onBlur events.
Anyways, I'm using the Kendo React DatePicker component (https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/), so this might just be posted in the wrong forum, sorry about that!
Looking forward to your findings after an investigation!
/Andreas
Thank you for the clarification.
After research, we were able to pinpoint the cause of the issue.
Time ago there was a request in the Material UI for a feature called (TrapFocus). What this feature does is to prevent an element outside of the Dialog to get the focus. And in our case, we are rendering the Calender inside a Popup which is in the body element directly(outside of the Dialog). This causes the TrapFocus feature to return the focus to the Dialog, which on the other hand is firing the blur event of the Popup and the DatePicker is closed.
https://github.com/mui-org/material-ui/issues/4384
https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Modal/TrapFocus.js
In this case, we can suggest two approaches:
1) Set a custom Popup to the DatePicker, and use its appentTo property to render the Popup inside the Dialog, so the TrapFocus function is not executed:
https://codesandbox.io/s/o7nqzv76w6
https://www.telerik.com/kendo-react-ui-develop/components/popup/api/PopupProps/#toc-appendto
2) Check with the Material UI community if there is an option to disable this functionality.
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Rank 1
Thank you for investigating!
Your suggestions pointed me in the direction that quickly solved my issue!
All I had to do was to look into the underlying props of the MUI Dialog - the Modal. The Modal has a prop "disableEnforceFocus" which, if set to true, disabled the behaviour that causes the Kendo DatePicker component to close. So, thanks a lot for your help!!
/Andreas