Use pull request #11123 from DanielRuf/fix/dropdown-toggle-keyboard-10391 for v6.5.0

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

Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>

diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js
index f9f6a0110c4c5314f46539130b54de05da7291cf..82ab6e5bcad646d20aabfdb72143a1ba2affa5dd 100644 (file)
--- 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 85c95684e6660ebaf9910f4f7b04fa0a39506353..9f7696a2410a9496be9cf5e59b58cee1350f4f25 100644 (file)
--- 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');