From bca6cf55fdbbe94013bd1f0ac4d27c3bbe9bce7a Mon Sep 17 00:00:00 2001
From: Daniel Ruf <daniel@daniel-ruf.de>
Date: Tue, 3 Apr 2018 23:54:24 +0200
Subject: [PATCH] fix: toggle dropdown if there is no focusable element inside

---
 js/foundation.dropdown.js              |  4 ++--
 test/javascript/components/dropdown.js | 15 +++++++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

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');
-- 
2.47.2