Datepicker: hide datepicker on blur event

Why do you think this is not the case today?

scott.gonzales,

Take a look here https://github.com/jquery/jquery-ui/blob/653673ed64176645128782038e0ee99c05514b92/ui/jquery.ui.datepicker.js#L530-532, here https://github.com/jquery/jquery-ui/blob/653673ed64176645128782038e0ee99c05514b92/ui/jquery.ui.datepicker.js#L1796-1797 and here https://github.com/jquery/jquery-ui/blob/653673ed64176645128782038e0ee99c05514b92/ui/jquery.ui.datepicker.js#L839-852

Currently, date picker closes if user clicks in a date, clicks anywhere outside the date picker itself, press the tab key or the esc key.

I'm closing as won't fix, with the following responses to your reasons why listening specifically to blur would be great:

1) Symmetry doesn't really matter, since it doesn't provide much benefit to us as implementors and it's not part of the external API.

2) We can remove tab handling, but must add a lot more complex logic to deal with blurs that should not close the datepicker, such as clicking on the calendar without selecting a date.

3) You should use better testing tools.

With that being said, the rewrite will probably use blur.

Scott,

Handling blur event will give us the possibility to work with tools like phantom.js and others that emulates the user interaction using only browser javascript.

What you mean with better testing tools?

I didn't see anything that classify phantom.js as not good tool since it works perfectly on many environments (except for jquery ui datepicker).

Selenium fails randomly without any reason since ever and capybara-webkit is still veeeeeeeery slow on linux.

Also, what you mean with more complex logic?

I don't see more complexity using focus/blur events instead of intercepting tab key or clicking outside of date picker.

I don't know if is possible to intercept the blur event to not close the date picker clicking inside the date picker (I'm currently trying to discover that).

I guess that could be classified as complex code https://github.com/jquery/jquery-ui/blob/653673ed64176645128782038e0ee99c05514b92/ui/jquery.ui.datepicker.js#L839-852 :)

You said you were using a testing tool that doesn't emulate mouse events. That doesn't sound accurate now; it sounds like you're using a tool that doesn't interact at the OS level. You can definitely write a test that would work with the existing code.

Trust me when I say that handling blur is a pain. It's very complex, we do it in other widgets. The problem is in IE where it's impossible to prevent moving focus on click and focus events are asynchronous.

Scott,

You got me wrong.

Poltergeist do not fires mouse events to fill fields and it really do not make sense.

What happens, if you look the previously code I commented https://github.com/jonleighton/poltergeist/blob/7cb46fbc3c002c062bb11953ffa46f6ab2c7bca6/lib/capybara/poltergeist/client/agent.coffee#L150-166, it triggers focus -> keydown, key press, keyup for each character -> blur.

We can even click on input instead of triggering focus but that is not the point.

Also, do not makes sense trigger tab key instead of blur event even less clicking at a position outside the date picker and input.

That's not an issue related to my application, jQuery UI, Poltergeist or Phantom.js, it's a problem of integration between all these tools.

I'm currently workarounding this using this code (https://gist.github.com/c0735dbfd682cdd43161) but it prevents user to navigate between months (because the input lost the focus).

I'm trying to work in these events but I don't have an IE to test the problem of asynchronous blur.

hi

i fixed that with this code

$(function () {

$("#ctl00_ContentPlaceHolder3_txtstartdate").datepicker({

numberOfMonths: 2,

showButtonPanel: true

});

var tab_pressed = 0;

$('#ctl00_ContentPlaceHolder3_txtstartdate').blur(function () {

setTimeout(function () {

if (tab_pressed == 1)

$('#ctl00_ContentPlaceHolder3_txtstartdate').datepicker("hide");

tab_pressed = 0;

}, 300);

});

$('#ctl00_ContentPlaceHolder3_txtstartdate').keydown(function (event) {

if (event.which == 9)

tab_pressed = 1;

});

});

this code can hide datepicker with tab and you can change month and etc

but numberOfMonths property doesn't work for me , i just can see one calendar

somebody knows why?