adds example forms within dropdown pane, and adds auto focus option/method for dropdo...

diff --git a/docs/pages/dropdown.md b/docs/pages/dropdown.md
index 9654d4987863de2f537e704d8c4f1cde3dae0415..73a7ec88e3cd8170ab3f5f7c76a81abfff837fb8 100644 (file)
--- a/docs/pages/dropdown.md
+++ b/docs/pages/dropdown.md
@@ -17,8 +17,22 @@ To create the dropdown trigger, add `data-toggle` to a `<button>`. The value of
 
 ```html_example
 <button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
-<div class="dropdown-pane" id="example-dropdown" data-dropdown>
-  Just some junk that needs to be said. Or not. Your choice.
+<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
+  Example form in a dropdown.
+  <form>
+    <div class="row">
+      <div class="medium-6 columns">
+        <label>Name
+          <input type="text" placeholder="Kirk, James T.">
+        </label>
+      </div>
+      <div class="medium-6 columns">
+        <label>Rank
+          <input type="text" placeholder="Captain">
+        </label>
+      </div>
+    </div>
+  </form>
 </div>
 
 

diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js
index 9426c6e084610f046c9a10c5e1947579070e7555..a03952095921af0cf2db97dcd8203573d05c6901 100644 (file)
--- a/js/foundation.dropdown.js
+++ b/js/foundation.dropdown.js
@@ -59,11 +59,17 @@
      */
     positionClass: '',
     /**
-     * Allow the plugin to trap focus to the dropdown pane on open.
+     * Allow the plugin to trap focus to the dropdown pane if opened with keyboard commands.
      * @option
      * @example false
      */
-    trapFocus: false
+    trapFocus: false,
+    /**
+     * Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening.
+     * @option
+     * @example true
+     */
+    autoFocus: false
   };
   /**
    * Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor.
@@ -192,7 +198,6 @@
     if(this.options.hover){
       this.$anchor.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
           .on('mouseenter.zf.dropdown', function(){
-            console.log('hover');
             clearTimeout(_this.timeout);
             _this.timeOut = setTimeout(function(){
               _this.open();
@@ -261,7 +266,13 @@
     this._setPosition();
     this.$element.addClass('is-open')
         .attr({'aria-hidden': false});
-
+        
+    if(this.options.autoFocus){
+      var $focusable = Foundation.Keyboard.findFocusable(this.$element);
+      if($focusable.length){
+        $focusable.eq(0).focus();
+      }
+    }
 
 
     /**