Prevent select dropdown from opening in FireFox and Opera

Question

In jQuery, you can stop a <select> from opening it's dropdown menu by using event.preventDefault in the mousedown handler. Allowing you to replace the dropdown with something else while still retaining the original style of the form element.

This works fine in Chrome and MSIE, but in FireFox and Opera the dropdown appears regardless. (Not tested on Safari)

Example: http://jsfiddle.net/9cmEh/

The select element should look enabled and still respond to all user interaction as if enabled, but the dropdown should not be rendered. Instead the dropdown will be replaced by something custom rendered, such as including color swatches, icons or fonts, but the "custom dropdown" part is already done in my project.

Does anybody know how to make this work in all* browsers.

"All" meaning the recent versions of the five browsers mentioned.

Duplicate of http://stackoverflow.com/questions/8870037/preventdefault-not-working-on-select-elements-in-firefox-9-0-1 — The Alpha, Jul 22 '12 at 20:24
@Sheikh Heera that link is about a FireFox bug regarding keydown. Keyboard interaction with a `select` does not involve the dropdown, which my question was about. — Martijn, Jul 22 '12 at 20:37
event.preventDefault() now seems to work on the latest version of Firefox (25) — lambinator, Nov 08 '13 at 20:43
@lambinator. Thanks for the notice. Turns out it now also works on Opera. — Martijn, Nov 08 '13 at 21:07

adeneo · Accepted Answer · 2012-07-22T20:29:21.253

10

$(function() {
    $('select').on('focus', function(e) {
        this.blur();
        window.focus();
    });
});

FIDDLE

Works in Firefox atleast, but does'nt seem to work in Chrome ?

EDIT

I could'nt come up with a decent way of detecting whether one method works or not, so did some browser sniffing instead. Not really the best way to do it, but the best I could come up with, and it does seem to work in the browsers I've tested :

$(function() {
    $('select').on('focus mousedown', function(e) {
        if ($.browser.webkit||$.browser.msie) {
            e.preventDefault();
        }else{
            this.blur();
            window.focus();
        }
    });
});

edited Jul 22 '12 at 20:29

answered Jul 22 '12 at 20:14

adeneo

312,895
29
395
388

Seems to work for Opera as well. I could probably use both methods. – Martijn Jul 22 '12 at 20:25
@Martijn Did some testing and came up with the above, seems to work, but checking for user agents is'nt really considered good practice. – adeneo Jul 22 '12 at 20:30
As I understand it, it doesn't hurt to simply do both methods always. e.preventDefault() does nothing on FF/Opera, blur/focus does nothing on Chrome/MSIE. I'll test it out. Wouldn't need to check user agents. – Martijn Jul 22 '12 at 20:33
The mousedown event occurs before the focus event, so preventing default on the mousedown event will make the focus event not fire, so it wont work. Fiddled around with it, and it seems to be one way or the other, hence the browser sniffing to prevent the preventDefault to run on other browsers than webkit and IE. – adeneo Jul 22 '12 at 20:40

score 1 · Answer 2 · edited May 23 '17 at 12:23

1

thy this

               //e.stopPropagation works only in Firefox.
                  if (event.stopPropagation) {
                event.stopPropagation();
                event.preventDefault();
                 }

came from here link , This may help on the opera situation , it is slightly different question , but you may be able to get it to work

edited May 23 '17 at 12:23

Community

1
1

answered Jul 22 '12 at 20:11

Scott Selby

9,420
12
57
96

score 0 · Answer 3 · answered Nov 12 '15 at 08:58

0

This should works in most case both on click and focus (with tab):

$('select').on('focus mousedown', function(e){
    e.stopPropagation();
    e.preventDefault();
    this.blur();
    window.focus();
});

answered Nov 12 '15 at 08:58

Seb33300

7,464
2
40
57

score 0 · Answer 4 · answered Jan 06 '16 at 17:46

This is a known bug: https://bugzilla.mozilla.org/show_bug.cgi?id=392863
It is currently inside firefox ESR32.

If like me you have a hidden <select> under your custom HTML/Javascript select and still want to keep the focus on that hidden <select> (for accessibility, tab navigation, arrow, enter ...).

Simply use z-index: -1.

.hidden-select {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}

score 0 · Answer 5 · answered Dec 12 '17 at 12:34

0

disable not selected elements (options).

$('select option:not(:selected)').attr("disabled",true);

answered Dec 12 '17 at 12:34

stalin wesley

165
5
13

Prevent select dropdown from opening in FireFox and Opera

5 Answers5

Linked

Related