Chrome & Safari dropdown does not close when clicked outside

[owldesign]

When you click outside the menu anywhere on the page, it stays open. FF and IE works fine and the menu collapses back.

[owldesign]

anyone had this happen? any fixes?

[nolfranklin]

Yup. Still waiting for a fix as well.

[lae-mtl]

Try this, it worked for me !

$(document).click(function(){
$('.dk_open').removeClass('dk_open');
});

$('.dk_open').live('click',function(e){
e.stopPropagation();
});

[reactivo]

I'm having this issue as well and the suggestion made above didn't work. Any ideas?

[garposmack]

You could add this line in the "live" "click" event of .dk_toggle.
Line 363, or look for: // Handle click events on the dropdown toggler.
Add this: $('.dk_open').removeClass('dk_open'); .

The final method should be like this:

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

[ekdesign]

Hey there,

did you notice that in chrome, when setting max-height in CSS doesn't open scrolling but in FF and IE it does.

Someone noticed that and fixed it maybe?

10x,
EK

[ChayaCooper]

lae-mtl's suggestions didn't work for me either, but garposmack's fix worked perfectly. Thank you so much!

I think this is definitely worth submitting as a pull request :-)

[snig-b]

A combination of garposmak's and lae-mtl's fixes worked for me---

$(document).click(function(){
    $('.dk_open').removeClass('dk_open');
});
$(document).on('click','.dk_open',function (e) {
    e.stopPropagation();
});
$(document).on('click','.dk_toggle',function (e) {

    var $dk  = $(this).parents('.dk_container').first();

    if ( $.browser.webkit ){
        $('.dk_open').removeClass('dk_open');
            $dk.toggleClass('dk_open');
    }
    return false;
});

I added this code outside the library in my own code.
Thank you :)

[rayiezhf]

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>

[snig-b]

Although this will work.. but it will behave inconsistently if there are more than 1 element with the same tabindex in a page.
So using tabindices is an option only if you are sure there's not going to be another element with the same tab index on the page.

[lukechapman]

Find:

_closeDropdown($('.dk_toggle').parents(".dk_container").first());

Replace with:

 _closeDropdown($('.dk_open'));

(Should be around the bottom, line 427 as of version 1.0.3)

[captbaritone]

I ended up using @snig-b's fix which seems to work. I can also add, that it must have something to do with the tab index as @rayiezhf mentioned because the last dropdown on a page seems to function correctly.