From: Daniel Ruf <daniel@daniel-ruf.de>
Date: Tue, 3 Apr 2018 21:54:24 +0000 (+0200)
Subject: fix: toggle dropdown if there is no focusable element inside
X-Git-Tag: v6.6.0~3^2~244^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=bca6cf55f;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

fix: toggle dropdown if there is no focusable element inside
---

diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js
index f542abe19..3874a029d 100644
--- a/js/foundation.dropdown.js
+++ b/js/foundation.dropdown.js
@@ -35,8 +35,8 @@ class Dropdown extends Positionable {
     this._init();
 
     Keyboard.register('Dropdown', {
-      'ENTER': 'open',
-      'SPACE': 'open',
+      'ENTER': 'toggle',
+      'SPACE': 'toggle',
       'ESCAPE': 'close'
     });
   }
diff --git a/test/javascript/components/dropdown.js b/test/javascript/components/dropdown.js
index 85c95684e..9f7696a24 100644
--- a/test/javascript/components/dropdown.js
+++ b/test/javascript/components/dropdown.js
@@ -7,6 +7,8 @@ describe('Dropdown', function() {
     `<button class="${buttonClasses}" type="button" data-toggle="my-dropdown">toggle</button>`;
   const getDropdownContainer = (dropdownClasses = '') =>
     `<div class="${dropdownClasses}" data-dropdown id="my-dropdown">Dropdown</div>`;
+  const getFocusableDropdownContainer = (dropdownClasses = '', inputId = '') =>
+    `<div class="${dropdownClasses}" data-dropdown id="my-dropdown">Dropdown${getFocusableInput(inputId)}</div>`;
 
   const getFocusableInput = (inputId = '') =>
     `<input type="text" placeholder="should auto focus" id="${inputId}" />`;
@@ -182,14 +184,23 @@ describe('Dropdown', function() {
 
       $dropdownContainer.should.be.visible;
     });
-    it('focuses Dropdown on SPACE', function() {
+    it('does not focus Dropdown on SPACE by default', function() {
       $dropdownController = $(getDropdownController()).appendTo('body');
       $dropdownContainer = $(getDropdownContainer()).appendTo('body');
       plugin = new Foundation.Dropdown($dropdownContainer, {});
       $dropdownController.focus()
         .trigger(window.mockKeyboardEvent('SPACE'));
 
-      document.activeElement.should.be.equal($dropdownContainer[0]);
+      document.activeElement.should.be.equal($dropdownController[0]);
+    });
+    it('focuses Dropdown on SPACE when container has a focusable element', function() {
+      $dropdownController = $(getDropdownController()).appendTo('body');
+      $dropdownContainer = $(getFocusableDropdownContainer()).appendTo('body');
+      plugin = new Foundation.Dropdown($dropdownContainer, {});
+      $dropdownController.focus()
+        .trigger(window.mockKeyboardEvent('SPACE'));
+
+      document.activeElement.should.be.equal($dropdownController[0]);
     });
     it('does not focus Dropdown when anchor is an input', function() {
       $dropdownController = $('<input type="text" data-toggle="my-dropdown">').appendTo('body');