Datepicker disappears when clicking scroll bar and doesn't return when clicking in input box again.

[casperson]

This only happens when you click on the scroll bar on a page. When you click, the datepicker disappears, but the input box doesn't lose focus. Now if you click back into the input box (which still has focus) the datepicker will not pop open. You have to click outside the box to blur it, then click back in. If you click outside the input box anywhere else besides the scroll bar, then the input box loses focus. It only keeps the focus on the input box when clicking right on the scroll bar.

See it in action on the demo site! http://eternicode.github.io/bootstrap-datepicker/ Make sure the window is small enough to create a scroll bar though, obviously.

1. Click in the datepicker input box to open datepicker.
2. Now click directly on the window scroll bar. Datepicker should disappear while input box keeps focus.
3. Click back into the datepicker input box.

That should do it. Just need to blur the input box, I believe. I replicated it on multiple browsers.

[Azaret]

So the issue here is coming from "recent" updates of webkit. (At least for me since we upgraded some webapp where we use datepickers from iOS5 to iOS9 recently, yeah took us some time...)

When you click outside an input, the chain of events goes as follow:

1. mousedown (& touchestart on mobile) with where you clicked as target and bubbles.
2. focusout with the input as target
3. click with where you clicked as target and bubbles.
4. transitionend with always the input as target and bubbles.

The issue we're facing is that when you click on the scrollbar, the browser send mousedown but does not lose the focus of the input. Which is understandable since the browser want you to know that the user clicked, but not lose focus on the input, since the Mobile era we don't want to lose focus when the user is panning the page.

Since hiding the picker rely on mousedown, it does hide the picker because the target will be html. Unfortunately we can't only rely on focusout either because it doesn't provide the next focused target.

The idea of my PR is to catch which element have been clicked on the mousedown event and then wait for focusout to decide if we want to hide or not the picker. It's maybe not the best solution but it all I came up with for now.

We also could add html as an exception but I'm not really feeling like it either.

@acrobat @vsn4ik @hebbet Your thoughts are more than welcome.

[stanpalatnik]

Why not just modify the click event handler to see if we are clicking inside the input box. If so, check if the picker is visible or not and go from there. Am I missing something?

[stanpalatnik]

Created a solution that blurs the input whenever it hides the datepicker. Those actions should be coupled. What do you guys think?

[acrobat]

@Azaret it looks like #1895 fixes the issue, does it looks like a good solution to you?

[mgugniewicz]

gravityforms solution:

        if( field.is( ':input' ) ) {
            field.click( function() {
                field.datepicker( 'show' );
            } );
        }

[amitshahc]

So what is the status of the resolution of this bug? and what is the temporary solution? any help?