Fix hover state in Firefox for nav bar inputs.

foundation · Oct 2, 2012 · f984e51 · f984e51 · benjR · Oct 2, 2012
1 parent ceb7e6a
commit f984e51
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 9 deletions.
diff --git a/test/navigation.html b/test/navigation.html
@@ -61,11 +61,25 @@ <h4>Nav Bar</h4>
               <a href="#">Nav Item 2</a>
               <a href="#" class="flyout-toggle"><span> </span></a>
               <ul class="flyout">
-                <li><a href="#">Sub Nav Item 1</a></li>
-                <li><a href="#">Sub Nav Item 2</a></li>
-                <li><a href="#">Sub Nav 3</a></li>
-                <li><a href="#">Sub Nav 4</a></li>
-                <li><a href="#">Sub Nav Item 5</a></li>
+                <li>
+                  <form action="#" method="post">
+                    <fieldset class="textbox">
+                      <label>
+                        <span>Username or email</span>
+                        <input type="text" name="username" autocomplete="on">
+                      </label>
+                      <label>
+                        <span>Password</span>
+                        <input class="js-password-field" type="password" value="" name="password">
+                      </label>
+                      <label>
+                        <input type="checkbox" value="1" name="remember_me">
+                        <span>Remember me</span>
+                      </label>
+                      <button type="submit" class="nice button" style="margin-bottom: 10px;">Sign in</button>
+                    </fieldset>
+                  </form>
+                </li>
               </ul>
             </li>
             <li class="has-flyout">

diff --git a/vendor/assets/javascripts/foundation/jquery.foundation.navigation.js b/vendor/assets/javascripts/foundation/jquery.foundation.navigation.js
@@ -19,10 +19,32 @@
       });
       $('.nav-bar>li.has-flyout', this).addClass('is-touch');
     } else {
-      $('.nav-bar>li.has-flyout', this).hover(function () {
-        $(this).children('.flyout').show();
-      }, function () {
-        $(this).children('.flyout').hide();
+      $('.nav-bar>li.has-flyout', this).on('mouseenter mouseleave', function (e) {
+        if (e.type == 'mouseenter') {
+          $(this).children('.flyout').show();
+        }
+
+        if (e.type == 'mouseleave') {
+          var flyout = $(this).children('.flyout'),
+              inputs = flyout.find('input'),
+              hasFocus = function (inputs) {
+                var focus;
+                if (inputs.length > 0) {
+                  inputs.each(function () {
+                    if ($(this).is(":focus")) {
+                      focus = true;
+                    }
+                  });
+                  return focus;
+                }
+
+                return false;
+              };
+
+          if (!hasFocus(inputs)) {
+            $(this).children('.flyout').hide();
+          }
+        }
       });
     }