React-datepicker: Datepicker on mobile device - Suggest using a portal/overlay

Created on 12 Jan 2017  路  3Comments  路  Source: Hacker0x01/react-datepicker

I have been testing out the datepicker for a project I am working on, but have found the user experience on mobile not to be very good.

I took a look at how airbnb's react-dates handle mobile and found they use a portal/overlay.

I suggest making a similar overlay for react-datepicker.

picture ro-savage

Most helpful comment

withPortal works great on desktop browser.
When I test on mobile, it doesn't prevent outside touch events and if I click button behind overlay, it's click event works.
And browser console says Unable to preventDefault inside passive event listener invocation.

picture leomyth330 on 23 Feb 2018
👍3

All 3 comments

I have created PR #696 the adds the the prop withPortal which creates the calendar in a portal/overlay.

Here it is running on my project.

Happy to hear any feedback.

ro-savage picture ro-savage on 12 Jan 2017
👍1

Pushed 0.40.0 with this included.

martijnrusschen picture martijnrusschen on 17 Jan 2017

withPortal works great on desktop browser.
When I test on mobile, it doesn't prevent outside touch events and if I click button behind overlay, it's click event works.
And browser console says Unable to preventDefault inside passive event listener invocation.

leomyth330 picture leomyth330 on 23 Feb 2018
👍3
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jbccollins picture jbccollins  路  3Comments
kkras3 picture kkras3  路  3Comments
jjjss94 picture jjjss94  路  3Comments
tamitutor picture tamitutor  路  3Comments
dhruvparmar372 picture dhruvparmar372  路  3Comments