From bbb0d2b573c28793358be66a1c05f2d68ded4db6 Mon Sep 17 00:00:00 2001
From: Pierre-Denis Vanduynslager <pierre.denis.vanduynslager@gmail.com>
Date: Mon, 2 Jan 2017 17:44:27 -0500
Subject: Dropdown: close menu when focusing outside element (#21375)

* Close dropdown menu when focusing an outside element
* Update unit test to new markup
---
 js/tests/unit/dropdown.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)

(limited to 'js/tests')

diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index 53455c2a6..9a34fc0c9 100644
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -192,6 +192,30 @@ $(function () {
     assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')
   })
 
+  QUnit.test('should remove "show" class if body is focused', function (assert) {
+    assert.expect(2)
+    var dropdownHTML = '<div class="tabs">'
+        + '<div class="dropdown">'
+        + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+        + '<div class="dropdown-menu">'
+        + '<a class="dropdown-item" href="#">Secondary link</a>'
+        + '<a class="dropdown-item" href="#">Something else here</a>'
+        + '<div class="dropdown-divider"/>'
+        + '<a class="dropdown-item" href="#">Another link</a>'
+        + '</div>'
+        + '</div>'
+        + '</div>'
+    var $dropdown = $(dropdownHTML)
+       .appendTo('#qunit-fixture')
+       .find('[data-toggle="dropdown"]')
+       .bootstrapDropdown()
+       .trigger('click')
+
+    assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
+    $(document.body).trigger('focusin')
+    assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')
+  })
+
   QUnit.test('should remove "show" class if body is clicked, with multiple dropdowns', function (assert) {
     assert.expect(7)
     var dropdownHTML = '<ul class="nav">'
@@ -229,6 +253,42 @@ $(function () {
     assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed')
   })
 
+  QUnit.test('should remove "show" class if body is focused, with multiple dropdowns', function (assert) {
+    assert.expect(7)
+    var dropdownHTML = '<div class="nav">'
+        + '<div class="dropdown" id="testmenu">'
+        + '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>'
+        + '<div class="dropdown-menu">'
+        + '<a class="dropdown-item" href="#sub1">Submenu 1</a>'
+        + '</div>'
+        + '</div>'
+        + '</div>'
+        + '<div class="btn-group">'
+        + '<button class="btn">Actions</button>'
+        + '<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>'
+        + '<div class="dropdown-menu">'
+        + '<a class="dropdown-item" href="#">Action 1</a>'
+        + '</div>'
+        + '</div>'
+    var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
+    var $first = $dropdowns.first()
+    var $last = $dropdowns.last()
+
+    assert.strictEqual($dropdowns.length, 2, 'two dropdowns')
+
+    $first.trigger('click')
+    assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click')
+    assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is show')
+    $(document.body).trigger('focusin')
+    assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed')
+
+    $last.trigger('click')
+    assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click')
+    assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is show')
+    $(document.body).trigger('focusin')
+    assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed')
+  })
+
   QUnit.test('should fire show and hide event', function (assert) {
     assert.expect(2)
     var dropdownHTML = '<ul class="tabs">'
-- 
cgit v1.2.3