Opened 7 years ago

Closed 7 years ago

Last modified 5 years ago

#8330 closed enhancement (wontfix)

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:

Description

Hi,

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: https://github.com/jquery/jquery-ui/blob/653673ed64176645128782038e0ee99c05514b92/ui/jquery.ui.datepicker.js#L530-532
  3. date picker will work gracefully with integration test tools like poltergeist, where mouse events isn't emulated: https://github.com/jonleighton/poltergeist/blob/7cb46fbc3c002c062bb11953ffa46f6ab2c7bca6/lib/capybara/poltergeist/client/agent.coffee#L150-166

What do you think?

Change History (7)

comment:1 Changed 7 years ago by Scott González

Owner: set to gabriel.sobrinho
Status: newpending

Why do you think this is not the case today?

comment:3 Changed 7 years ago by Scott González

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.

comment:4 Changed 7 years ago by gabriel.sobrinho

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

comment:5 Changed 7 years ago by Scott González

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.

comment:6 Changed 7 years ago by gabriel.sobrinho

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.

comment:7 Changed 5 years ago by yeganehaym

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?

Note: See TracTickets for help on using tickets.