jQuery Dropkick in Chrome: Dropdowns not auto-closing

Question

Picture says 1000 words: http://d.pr/ZeBI

Basically in most other browsers, when focus on the dropkick menu is lost, it closes. Or when choosing another dropkick menu, the previous / other open menu's auto-close.

In Chrome however, this doesn't happen. You can open them all and to close them you have to either select something or click it again.

Any ideas?

Thank you!

Anyone know how to fix the multiple widths issue? http://stackoverflow.com/questions/11769888/how-to-individually-target-multiple-dropdowns-in-css-for-dropkick-plug-in — user1318135, Aug 02 '12 at 22:56

score 7 · Accepted Answer · edited Mar 29 '12 at 17:37

I, change in the code where it is:

  // Focus events
      $dk.bind('focus.dropkick', function (e) {
        $dk.addClass('dk_focus');
      }).bind('blur.dropkick', function (e) {
        $dk.removeClass('dk_open dk_focus');
      });

Put:

if($.browser.webkit) {

      $('html').click(function() {
          $dk.removeClass('dk_open dk_focus');

    });
      $dk.click(function(event){
          $dk.addClass('dk_focus');

      });


  }else{

      // Focus events
      $dk.live('focus', function() {
          $dk.addClass('dk_focus');
      }).live('blur', function() {
           $dk.removeClass('dk_open dk_focus');
      });
  }

and it will work fine.

I oped for the `on` method rather than `live`. Also used a different selector on Line 3 - in my case `$('html, body')` worked whereas `$('html')` did not. — kyle.stearns, Apr 05 '13 at 14:50

score 5 · Answer 2 · answered Jul 26 '12 at 09:11

5

I had the same problem and a friend of mine discovered that if you add "tabindex" attribute to the "select" tag dropkick will behave properly.

This won't work:

<select name="test">
<option val="1">a</option>
</select>

This will work:

<select name="test" tabindex="1">
<option val="1">a</option>
</select>

answered Jul 26 '12 at 09:11

Błażej Klisz

1,730
2
16
16

1

This worked for me too and is preferable to modifying the plugin - thanks! – ollie Sep 05 '12 at 08:57
+1. Worked nicely here too. And again, a nicer way of fixing it rather than modifying the plug in. Cheers! – Fraser May 22 '13 at 08:50

score 1 · Answer 3 · answered Aug 10 '12 at 06:29

There were lot of problems initiated related to the Dropkick in webkit browsers for web, as well as for mobile.

Here is the complete piece of code, find the following code in dropkick

// Focus events $dk.bind('focus.dropkick', function (e) { $dk.addClass('dk_focus'); }).bind('blur.dropkick', function (e) { $dk.removeClass('dk_open dk_focus'); });

and replace it with, the following

// Focus events
        if($.browser.webkit) {

              $('html').click(function() {
                  $dk.removeClass('dk_open dk_focus');

            });

          $dk.click(function(event){
                  $dk.addClass('dk_focus');

              });
              $('.dk_toggle').click(function(){
                var elements__ = $(this).parent('div');
                    if(elements__.hasClass('dk_open')){
                        _closeDropdown($dk); 
                        return false;
                    }
            });



          }
          else{

              // Focus events
              $dk.live('focus', function() {
                  $dk.addClass('dk_focus');
              }).live('blur', function() {
                   $dk.removeClass('dk_open dk_focus');
              });
          }

Happy Coding !!

score 1 · Answer 4 · answered Feb 22 '13 at 00:09

Here's an even easier fix that I found, courtesy of https://github.com/JamieLottering/DropKick/issues/45

You just need to add one line of code to the "live" "click" event of .dk_toggle (which starts on line 363 in most versions):

$('.dk_open').removeClass('dk_open');

The final method is:

// Handle click events on the dropdown toggler
$('.dk_toggle').live('click', function (e) {
    $('.dk_open').removeClass('dk_open');
    var $dk  = $(this).parents('.dk_container').first();
    _openDropdown($dk);
    if ("ontouchstart" in window) {
    $dk.addClass('dk_touch');
    $dk.find('.dk_options_inner').addClass('scrollable vertical');
    }
  e.preventDefault();
  return false;
});

jQuery Dropkick in Chrome: Dropdowns not auto-closing

4 Answers4