From: zurbchris <chris@zurb.com>
Date: Wed, 25 Nov 2015 00:48:39 +0000 (-0800)
Subject: adds example forms within dropdown pane, and adds auto focus option/method for dropdo... 
X-Git-Tag: v6.0.4~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5f0e7b319fc218b19bf74612c09262b8b8f7f665;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

adds example forms within dropdown pane, and adds auto focus option/method for dropdown panes
---

diff --git a/docs/pages/dropdown.md b/docs/pages/dropdown.md
index 9654d4987..73a7ec88e 100644
--- 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 9426c6e08..a03952095 100644
--- 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();
+      }
+    }
 
 
     /**