search

chrisdavies / tiny-date-picker

A small, modern, dependency-free date picker
https://chrisdavies.github.io/tiny-date-picker/
413 stars 87 forks source link

DateRangePicker closes with every click in Safari #92

Open forwardever opened 5 years ago

forwardever commented 5 years ago

clicking next or previous month buttons in Safari closes the range picker, range picker also closes when a start date has been selected, so you have to reopen the window to enter an end date (on you demo page).

problems just show up in Safari, everything seems to work in Chrome, Firefox and Edge

forwardever commented 5 years ago

click triggers focusout event (on demo page)

chrisdavies commented 5 years ago

Interesting. :/

Thanks for reporting this. The way the date picker is currently implemented, the focus event across platforms causes a lot of headaches. I have a better solution, but I don't think it'll be a small change. It's probably something that could be worked around with more hacks, but I'm not sure.

I'll happily accept a PR on this, but I'm not sure when I'll have the time to sit down and take a look. Right now, my side-project time is very compressed. I'm going to try to put all of it into getting a v3 out the door that solves this in a non-hacky way.

JosefWN commented 5 years ago

I can confirm, it's a tough one because it makes the range picker really tricky to use on iOS. Unfortunately I can also extend this ticket to include Firefox as well.

jeanbaptistevilain commented 5 years ago

I have come up with a quick & dirty fix that works for me on Chrome / FF / Safari : container.addEventListener('mousedown', function(evt) { evt.preventDefault(); evt.stopPropagation(); return false; }); where container is an element containing the calendars. Basically the idea is to catch the mousedown event (cancellable) instead of the focusout one (not cancellable). Hopefully I'll have some time to create a clean PR on that one... In the meantime, hope this helps.