DatePicker closes directly when used in Material-ui dialog

5 posts, 0 answers
  1. Andreas
    Andreas avatar
    15 posts
    Member since:
    Oct 2018

    Posted 05 Apr 2019 Link to this post

    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?

  2. Stefan
    Admin
    Stefan avatar
    2817 posts

    Posted 08 Apr 2019 Link to this post

    Hello, Andreas,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Andreas
    Andreas avatar
    15 posts
    Member since:
    Oct 2018

    Posted 08 Apr 2019 in reply to Stefan Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    2817 posts

    Posted 09 Apr 2019 Link to this post

    Hello, 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Andreas
    Andreas avatar
    15 posts
    Member since:
    Oct 2018

    Posted 09 Apr 2019 in reply to Stefan Link to this post

    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

Back to Top