only overlay dropdowns for mobile

1 files changed, 5 insertions, 1 deletions

diff --git a/js/dropdown.js b/js/dropdown.js
index c76162b1c..d9acdd2e8 100644
--- a/js/dropdown.js
+++ b/js/dropdown.js
@@ -43,7 +43,10 @@
     clearMenus()
 
     if (!isActive) {
-      $('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus)
+      if ('ontouchstart' in document.documentElement) {
+        // if mobile we we use a backdrop because click events don't delegate
+        $('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus)
+      }
       $parent.toggleClass('open')
     }
 
@@ -134,6 +137,7 @@
 
 
   $(document)
+    .on('click.dropdown.data-api', clearMenus)
     .on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
     .on('click.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
     .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)