Skip to main content

Search and Top Navigation

#8330 closed enhancement (wontfix)

Opened May 17, 2012 08:21PM UTC

Closed May 17, 2012 08:36PM UTC

Last modified November 15, 2014 07:58PM UTC

Datepicker: hide datepicker on blur event

Reported by: gabriel.sobrinho Owned by: gabriel.sobrinho
Priority: minor Milestone: 1.9.0
Component: ui.datepicker Version: git (not yet released)
Keywords: Cc:
Blocked by: Blocking:


Would be great if date picker closes on blur event for three reasons:

1. date picker opens with focus event, it will keep symmetry

2. keeping symmetry, we cold remove the intercept of tab key press on key down event:

3. date picker will work gracefully with integration test tools like poltergeist, where mouse events isn't emulated:

What do you think?

Attachments (0)
Change History (7)

Changed May 17, 2012 08:25PM UTC by scottgonzalez comment:1

owner: → gabriel.sobrinho
status: newpending

Why do you think this is not the case today?

Changed May 17, 2012 08:29PM UTC by gabriel.sobrinho comment:2

Changed May 17, 2012 08:36PM UTC by scottgonzalez comment:3

resolution: → wontfix
status: newclosed

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.

Changed May 17, 2012 09:00PM UTC by gabriel.sobrinho comment:4


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 :)

Changed May 17, 2012 09:15PM UTC by scottgonzalez comment:5

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.

Changed May 17, 2012 09:31PM UTC by gabriel.sobrinho comment:6


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, 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 ( 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.

Changed November 15, 2014 07:58PM UTC by yeganehaym comment:7


i fixed that with this code

$(function () {


numberOfMonths: 2,

showButtonPanel: true


var tab_pressed = 0;

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

setTimeout(function () {

if (tab_pressed == 1)


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?