Datepicker closing on loss of focus

Question

I have some JS that is executing on a datepicker that closes it. Whenever I select a date, it works. When I select the a month or a year from the selectmenu, an event is executing that is focusing off of the datepicker and closes it.

Any suggestions on how to track down this event?

JsFiddle

Relevant Code

$(function() {
  $(".isDatepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: "button",
    buttonText: "<i class='fa fa-calendar'></i>",
  });
});

If I run it with css it doesn't happen: http://jsbin.com/nofomih/edit?html,js,output — Mosh Feu, Dec 13 '16 at 13:17
that jsbin isnt running the scripts from jquery-ui as provided in the original fiddle. @MoshFeu — bldev, Dec 13 '16 at 13:19
`the scripts from jquery-ui as provided in the original fiddle` what do you mean? They both 1.12.1 — Mosh Feu, Dec 13 '16 at 13:28
You are correct. The issue is that the selectmenu function script that I added was removed. That is the section of code that is causing the problems in the datepicker widget. I need that for my custom selectmenus(jqueryui) @MoshFeu — bldev, Dec 13 '16 at 13:43
That's the problem. The custom dropdown create div outside the widget, so when you click on that "dropdown" you actually focus out from the widget. You need to looking for a plugin which not create the "options container" outside the widget. — Mosh Feu, Dec 13 '16 at 14:47
I am required to use jQuery UI. So i am trying to make code changes for that. — bldev, Dec 13 '16 at 15:20
Is the plugin you use for the custom `select` is jquery-ui [selectmenu](https://jqueryui.com/selectmenu/)? — Mosh Feu, Dec 13 '16 at 15:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/130545/discussion-between-bldev-and-mosh-feu). — bldev, Dec 13 '16 at 17:15
I think its too long time for me to look for the right answer, sorry, but here is a direction: http://stackoverflow.com/q/26773621/863110. Check if you can render the options container **inside** the colorpicker. In this way the `blur` event will not fire just like with regular select. — Mosh Feu, Dec 14 '16 at 11:41

score 1 · Answer 1 · answered Dec 13 '16 at 13:52

1

In answer to the question of how to track it down, Firebug (development tool for Firefox) lets you set a breakpoint on removal or editing of an HTML element. I believe it's in the menu when you click on the element in the DOM tree. And I imagine other browsers have something equivalent.

answered Dec 13 '16 at 13:52

David Knipe

3,417
1
19
19

Sorry but it's not an answer, it should be a comment. – Mosh Feu Dec 13 '16 at 14:18
It's a partial answer, since OP asked "Any suggestions on how to track down this event?". – David Knipe Dec 14 '16 at 20:42

score 0 · Answer 2 · answered Dec 13 '16 at 13:21

0

You have conflicting scripts I believe.

Remove the code below and it works as designed.

  $("button.ui-datepicker-trigger").click(function() {
    $("select").selectmenu();
  });

http://jsfiddle.net/6m42tw6d/

answered Dec 13 '16 at 13:21

bassxzero

4,838
22
34

I need this for the custom selectMenu element of Jquery UI. I have added cleaned up some js in the new https://jsfiddle.net/k0LyL4Ld/ @bassxyzero – bldev Dec 13 '16 at 13:35
Something is executing after this selectmenu has been executed. – bldev Dec 13 '16 at 13:36

score 0 · Answer 3 · answered Dec 13 '16 at 13:22

0

The problem is with your selectmenu(); initialization on all the select elements. Here is the updated fiddle where I've commented the selectmenu() initialization.

Solution would be, you need to target specific select elements or filter out select element from datepicker. The behavior is mixing up within.

answered Dec 13 '16 at 13:22

Guruprasad J Rao

29,410
14
101
200

the selectmenu is needed to be applied to all select menus. The problem is when the jQuery UI selectmenu is executed, it closes the widget on focus or click @guruprasad-rao – bldev Dec 13 '16 at 13:38

score 0 · Answer 4 · answered Dec 13 '16 at 13:27

0

You are initializing the menu more than once. If you need to refresh it, you can use "refresh":

$(function() {
  $(document).on('show.bs.modal', function() {
    $("select").selectmenu( "refresh" );
  });
  $("button.ui-datepicker-trigger").click(function(e) {
     $("select").selectmenu( "refresh" );
  });

  $("select").selectmenu();
  $("select").change(function() {
    alert("no");
  });
});

answered Dec 13 '16 at 13:27

Andrés Andrade

2,213
2
18
23

That doesnt seem work. I want to apply all of the select menus with the selectmenu script. This doesnt work when things are loaded after the fact, such as a modal or this datepicker widget. – bldev Dec 13 '16 at 13:47

Datepicker closing on loss of focus

4 Answers4