Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

Select does not open dropdown onclick

  • 9 답장
  • 14 이 문제를 만남
  • 484 보기
  • 최종 답변자: 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.

선택된 해결법

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!

문맥에 따라 이 답변을 읽어주세요 👍 4

모든 댓글 (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?

글쓴이 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?

글쓴이 JariTP90 수정일시

more options

선택된 해결법

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