Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Select does not open dropdown onclick

  • 9 replies
  • 14 have this problem
  • 38 views
  • Last reply by JariTP90

more options

I am currently using a datepicker from jQuery UI 1.10 with a select dropdown so that the user can choose year. The "yearpicker" works just fine in other browsers, but in FF21 (i have yet only tested it in this version) it does not work at all. It's like clicking a select-box with no options; the menu does not open and i cannot change the selected option with arrow-keys on my keyboard. It's just static.

I have read some other related posts about similar issues, and the tips given does not solve my problem (like restarting in safe mode, disable all add-ons, disable hardware accelerator, etc). I have also checked for solutions in disabling windows shadow options, but with no success. Since this only appears in FF i assume that this is not an issue with jQuery UI. This looks more like an issue with FF, and due to the history of problems with select-boxes it could be something old that is coming back.

I am currently using a datepicker from jQuery UI 1.10 with a select dropdown so that the user can choose year. The "yearpicker" works just fine in other browsers, but in FF21 (i have yet only tested it in this version) it does not work at all. It's like clicking a select-box with no options; the menu does not open and i cannot change the selected option with arrow-keys on my keyboard. It's just static. I have read some other related posts about similar issues, and the tips given does not solve my problem (like restarting in safe mode, disable all add-ons, disable hardware accelerator, etc). I have also checked for solutions in disabling windows shadow options, but with no success. Since this only appears in FF i assume that this is not an issue with jQuery UI. This looks more like an issue with FF, and due to the history of problems with select-boxes it could be something old that is coming back.

Chosen solution

After consulting three front-end developers we have found the issue. We found that the problems root was inside the fact that the datepicker was inside a colorbox modal. We avoided the issue by removing the tabindex-attribute, and now it works. Why FF cannot open select-boxes inside a modal when tabindex is used is kind of weird though. This might be a bug that the FF-team wants to take into notice. Thanks for the help!

Read this answer in context 👍 4

All Replies (9)

more options

update to firefox 22 and try again. getfirefox.com

more options

Can you post a link to a page demonstrating the problem? It could be your page or someone else's page with the same issue.

There was a previous discussion about problems using <input type="date">. Firefox is working on native support for that input type, so it's no longer safe to use it as a flag for external libraries. See: Your latest update (19) has broken Jquery date pickers on websites all over the planet.

more options

@Waka_Flocka_Flame: This page will be public, i cannot ask all my 15 000 users to do the same. This was not helpful at all.

@jscher2000: This is my code (sorry for the missing chars, the forum formatted the html horribly and made some stuff invisible):

<label class="datepicker-label">
       span class="label">Valid: /span>
            <input type="text" name="ValidFrom" class="datepicker hasDatepicker text" id="dateFrom">
            img class="ui-datepicker-trigger" src="some image" alt="some text title="some text"> span class="some icon"> /span>
</label>

The issue lies within the dropdown that i use from jquery datepicker. It is rendered by javascript and is there for the user so he/she can change year quickly. I am having a hard time finding the same issue anywhere else, and my page is local (and I am not the owner so i cannot publish it (work stuff)).

My jQuery code for changing defaults at datepicker:

$.datepicker.setDefaults({
	dateFormat: 'yy-mm-dd',
	firstDay: 1,
	changeYear: true,
	yearRange: 'c-10:c+10',
	showOn: "both",
	buttonImage: "some URI",
	buttonImageOnly: true,
	buttonText: "Some text"
});
$.datepicker.setDefaults($.datepicker.regional['sv']);

When i look at the example at jQuerys' own page it works fine. However, when i disable all my custom css-styling for datepickers the problem is still present. Any ideas of a workaround?

Modified by cor-el

more options

Hi JariTP90, I agree, this board doesn't do a good job with HTML snippets.

One way to set up a demo is to use this site: http://jsfiddle.net/

I think you can link in the relevant versions of jQuery and other libraries either from the site or from public URLs.

Can you replicate the issue there?

more options

@jscher2000: I was not able to reproduce the issue (look at http://jsfiddle.net/YHNzd/ ) however i saw something else that might be a part of the problem.

I have code that Prevents 'from' date from being greater than 'to' date, and vice versa. However, this code is strictly backbone-oriented so i have no idea how to show this in a good way since there is a lot of libraries needed to run the code.

The code without some of the backbone-oriented thingies follows:

onSelect: function(date) {

    $('#dateTo', self.$el).datepicker('option', {
           minDate: date
     });

}

Does this give you at least a clue about how it works?

Modified by JariTP90

more options

Chosen Solution

After consulting three front-end developers we have found the issue. We found that the problems root was inside the fact that the datepicker was inside a colorbox modal. We avoided the issue by removing the tabindex-attribute, and now it works. Why FF cannot open select-boxes inside a modal when tabindex is used is kind of weird though. This might be a bug that the FF-team wants to take into notice. Thanks for the help!

more options

Had the same problem and your workaround put me on the way to solve this issue. As your are using colorbox, there is an option to limit focus and navigation to the current modal. As jQuery DatePicker creates a new DOM element in the body, it's no longer on modal's content.

$.colorbox({ ..., trapFocus: false });

So disable that *#!?/# option! Thought it could be a nice option 1st time instantiated the plugin.. Hope this helped. Cheers

more options

I ran into the same problem while using bootstrap modals and a datetimepicker with select controls instead of the default sliders. Bootstrap's modal dialog div model suggests a tabindex of -1, after removing the tabindex the select controls worked again.

This occurred in FF 24.

more options

Thank you for your answers. :) It's good that you comment, other people might have the same problem but with other modal-type than i am using (i.e. Colorbox). Keep up the good work! :D