Merge pull request #7353 from tjhiggins/th_dropdown_closeonclick

[Dropdown] Add back closeOnClick functionality for dropdowns.

js/foundation.dropdown.js

@@ -75,7 +75,13 @@
      * @option
      * @example true
      */
-    autoFocus: false
+    autoFocus: false,
+    /**
+     * Allows a click on the body to close the dropdown.
+     * @option
+     * @example true
+     */
+    closeOnClick: false
   };
   /**
    * Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor.
@@ -269,6 +275,26 @@
       });
     });
   };
+  /**
+   * Adds an event handler to the body to close any dropdowns on a click.
+   * @function
+   * @private
+   */
+  Dropdown.prototype._addBodyHandler = function(){
+     var $body = $(document.body).not(this.$element),
+         _this = this;
+     $body.off('click.zf.dropdown')
+          .on('click.zf.dropdown', function(e){
+            if(_this.$anchor.is(e.target) || _this.$anchor.find(e.target).length) {
+              return;
+            }
+            if(_this.$element.find(e.target).length) {
+              return;
+            }
+            _this.close();
+            $body.off('click.zf.dropdown');
+          });
+  };
   /**
    * Opens the dropdown pane, and fires a bubbling event to close other dropdowns.
    * @function
@@ -296,6 +322,7 @@
       }
     }
 
+    if(this.options.closeOnClick){ this._addBodyHandler(); }
 
     /**
      * Fires once the dropdown is visible.

scss/components/_dropdown.scss

@@ -42,7 +42,7 @@ $dropdown-sizes: (
   padding: $dropdown-padding;
   position: absolute;
   visibility: hidden;
-  width: 300px;
+  width: $dropdown-width;
   z-index: 10;
   border-radius: $dropdown-radius;