Chosen: Open dropdown when tabbed onto field

Created on 23 May 2014 · 4Comments · Source: harvesthq/chosen

Hello,

Is there a way of opening the drop down when the user tabs onto the chosen select?
I haven't seen anything in the docs regarding this but then again I could have missed it.

Found this after a quick search:

$('body').on('focus', '.chosen-container-single input', function(){
    if (!$(this).closest('.chosen-container').hasClass('chosen-container-active')){
        $(this).closest('.chosen-container').trigger('mousedown');
        //or use this instead
        //$('#select').trigger('liszt:open');
    }    
});

Will give this ago. I don't suppose there is an option built in though?

Thanks

Source

SFPink

Most helpful comment

Temporary Solution:

jQuery('body').on('focus', '.chosen-container-single input', function () {
    if (!jQuery(this).closest('.chosen-container').hasClass('chosen-container-active')) {
        jQuery(this).closest('.chosen-container').prev().trigger('chosen:open');
    }
});

SFPink on 11 Jun 2014

👍3

All 4 comments

Chosen triggers a focus events, so the following should work:

$('body').on('focus', '.chosen-select', function(event){
  $(this).trigger('chosen:open');
});

The events in your found code are old and no longer supported.

koenpunt on 24 May 2014

My bad, the focus event is not triggered on the select itself.

koenpunt on 24 May 2014

Temporary Solution:

jQuery('body').on('focus', '.chosen-container-single input', function () {
    if (!jQuery(this).closest('.chosen-container').hasClass('chosen-container-active')) {
        jQuery(this).closest('.chosen-container').prev().trigger('chosen:open');
    }
});

SFPink on 11 Jun 2014

👍3

@SFPink's temporary solution looks like a good workaround. I'm closing this up!