CODEWITHSUNDEEP
jqueryformsselect
Mark
Mark

Reputation: 427

jQuery Dropkick in Chrome: Dropdowns not auto-closing

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!

Upvotes: 2

Views: 3825

Answers (4)

Chaya Cooper
Chaya Cooper

Reputation: 2530

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;
});

Upvotes: 1

Jatin
Jatin

Reputation: 11

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 !!

Upvotes: 1

Błażej Klisz
Błażej Klisz

Reputation: 1730

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>

Upvotes: 5

Pedro
Pedro

Reputation: 86

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.

Upvotes: 7

Related Questions