Dropdown without jQuery

3 files changed, 113 insertions, 82 deletions

diff --git a/js/tests/unit/dom/eventHandler.js b/js/tests/unit/dom/eventHandler.js
index 998132911..f28261632 100644
--- a/js/tests/unit/dom/eventHandler.js
+++ b/js/tests/unit/dom/eventHandler.js
@@ -336,6 +336,5 @@ $(function () {
     assert.ok(i === 5, 'listener removed again')
 
     document.body.removeChild(element)
-
   })
 })
diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index a94595ad2..a39d272ef 100644
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -28,6 +28,7 @@ $(function () {
   QUnit.test('should throw explicit error on undefined method', function (assert) {
     assert.expect(1)
     var $el = $('<div/>')
+    $el.appendTo('#qunit-fixture')
     $el.bootstrapDropdown()
     try {
       $el.bootstrapDropdown('noMethod')
@@ -39,6 +40,7 @@ $(function () {
   QUnit.test('should return jquery collection containing the element', function (assert) {
     assert.expect(2)
     var $el = $('<div/>')
+    $el.appendTo('#qunit-fixture')
     var $dropdown = $el.bootstrapDropdown()
     assert.ok($dropdown instanceof $, 'returns jquery collection')
     assert.strictEqual($dropdown[0], $el[0], 'collection contains element')
@@ -129,13 +131,14 @@ $(function () {
       .appendTo('#qunit-fixture')
       .find('[data-toggle="dropdown"]')
       .bootstrapDropdown()
-    $dropdown
-      .parent('.dropdown')
-      .on('shown.bs.dropdown', function () {
-        assert.strictEqual($dropdown.attr('aria-expanded'), 'true', 'aria-expanded is set to string "true" on click')
-        done()
-      })
-    $dropdown.trigger('click')
+
+    var dropdownParent = $dropdown.parent('.dropdown')[0]
+
+    EventHandler.on(dropdownParent, 'shown.bs.dropdown', function () {
+      assert.strictEqual($dropdown.attr('aria-expanded'), 'true', 'aria-expanded is set to string "true" on click')
+      done()
+    })
+    EventHandler.trigger($dropdown[0], 'click')
   })
 
   QUnit.test('should set aria-expanded="false" on target when dropdown menu is hidden', function (assert) {
@@ -157,15 +160,15 @@ $(function () {
       .find('[data-toggle="dropdown"]')
       .bootstrapDropdown()
 
-    $dropdown
-      .parent('.dropdown')
-      .on('hidden.bs.dropdown', function () {
-        assert.strictEqual($dropdown.attr('aria-expanded'), 'false', 'aria-expanded is set to string "false" on hide')
-        done()
-      })
+    var dropdownParent = $dropdown.parent('.dropdown')[0]
 
-    $dropdown.trigger('click')
-    $(document.body).trigger('click')
+    EventHandler.one(dropdownParent, 'hidden.bs.dropdown', function () {
+      assert.strictEqual($dropdown.attr('aria-expanded'), 'false', 'aria-expanded is set to string "false" on hide')
+      done()
+    })
+
+    EventHandler.trigger($dropdown[0], 'click')
+    EventHandler.trigger(document.body, 'click')
   })
 
   QUnit.test('should not open dropdown if target is disabled via class', function (assert) {
@@ -197,23 +200,26 @@ $(function () {
     var done = assert.async()
     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="divider"/>' +
-        '<a class="dropdown-item" href="#">Another link</a>' +
-        '</div>' +
-        '</div>' +
+        '  <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="divider"/>' +
+        '      <a class="dropdown-item" href="#">Another link</a>' +
+        '    </div>' +
+        '  </div>' +
         '</div>'
-    var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()
+
+    $(dropdownHTML).appendTo('#qunit-fixture')
+    var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()
+
     $dropdown
       .parent('.dropdown')
       .on('shown.bs.dropdown', function () {
         assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
         done()
       })
-    $dropdown.trigger('click')
+    EventHandler.trigger($dropdown[0], 'click')
   })
 
   QUnit.test('should remove "show" class if body is clicked', function (assert) {
@@ -244,7 +250,8 @@ $(function () {
         assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')
         done()
       })
-    $dropdown.trigger('click')
+
+    EventHandler.trigger($dropdown[0], 'click')
   })
 
   QUnit.test('should remove "show" class if tabbing outside of menu', function (assert) {
@@ -269,14 +276,17 @@ $(function () {
       .parent('.dropdown')
       .on('shown.bs.dropdown', function () {
         assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
-        var e = $.Event('keyup')
-        e.which = 9 // Tab
-        $(document.body).trigger(e)
-      }).on('hidden.bs.dropdown', function () {
+
+        EventHandler.trigger(document.body, 'keyup', {
+          which: 9 // Tab
+        })
+      })
+      .on('hidden.bs.dropdown', function () {
         assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')
         done()
       })
-    $dropdown.trigger('click')
+
+    EventHandler.trigger($dropdown[0], 'click')
   })
 
   QUnit.test('should remove "show" class if body is clicked, with multiple dropdowns', function (assert) {
@@ -310,7 +320,7 @@ $(function () {
         $(document.body).trigger('click')
       }).on('hidden.bs.dropdown', function () {
         assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
-        $last.trigger('click')
+        EventHandler.trigger($last[0], 'click')
       })
 
     $last.parent('.btn-group')
@@ -322,7 +332,7 @@ $(function () {
         assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
         done()
       })
-    $first.trigger('click')
+    EventHandler.trigger($first[0], 'click')
   })
 
   QUnit.test('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', function (assert) {
@@ -353,26 +363,26 @@ $(function () {
       .on('shown.bs.dropdown', function () {
         assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click')
         assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')
-        var e = $.Event('keyup')
-        e.which = 9 // Tab
-        $(document.body).trigger(e)
+        EventHandler.trigger(document.body, 'keyup', {
+          which: 9 // Tab
+        })
       }).on('hidden.bs.dropdown', function () {
         assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
-        $last.trigger('click')
+        EventHandler.trigger($last[0], 'click')
       })
 
     $last.parent('.btn-group')
       .on('shown.bs.dropdown', function () {
         assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click')
         assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')
-        var e = $.Event('keyup')
-        e.which = 9 // Tab
-        $(document.body).trigger(e)
+        EventHandler.trigger(document.body, 'keyup', {
+          which: 9 // Tab
+        })
       }).on('hidden.bs.dropdown', function () {
         assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
         done()
       })
-    $first.trigger('click')
+    EventHandler.trigger($first[0], 'click')
   })
 
   QUnit.test('should fire show and hide event', function (assert) {
@@ -405,8 +415,8 @@ $(function () {
         done()
       })
 
-    $dropdown.trigger('click')
-    $(document.body).trigger('click')
+    EventHandler.trigger($dropdown[0], 'click')
+    EventHandler.trigger(document.body, 'click')
   })
 
   QUnit.test('should fire shown and hidden event', function (assert) {
@@ -439,8 +449,8 @@ $(function () {
         done()
       })
 
-    $dropdown.trigger('click')
-    $(document.body).trigger('click')
+    EventHandler.trigger($dropdown[0], 'click')
+    EventHandler.trigger(document.body, 'click')
   })
 
   QUnit.test('should fire shown and hidden event with a relatedTarget', function (assert) {
@@ -472,7 +482,7 @@ $(function () {
         $(document.body).trigger('click')
       })
 
-    $dropdown.trigger('click')
+    EventHandler.trigger($dropdown[0], 'click')
   })
 
   QUnit.test('should fire hide and hidden event with a clickEvent', function (assert) {
@@ -586,7 +596,7 @@ $(function () {
         done()
       })
 
-    $dropdown.trigger('click')
+    EventHandler.trigger($dropdown[0], 'click')
   })
 
   QUnit.test('should skip disabled element when using keyboard navigation', function (assert) {
@@ -621,7 +631,7 @@ $(function () {
         assert.ok(!$(document.activeElement).is(':disabled'), ':disabled is not focused')
         done()
       })
-    $dropdown.trigger('click')
+    EventHandler.trigger($dropdown[0], 'click')
   })
 
   QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) {
@@ -645,23 +655,24 @@ $(function () {
       .parent('.dropdown')
       .on('shown.bs.dropdown', function () {
         assert.ok(true, 'shown was fired')
-        $dropdown.trigger($.Event('keydown', {
+
+        EventHandler.trigger($dropdown[0], 'keydown', {
           which: 40
-        }))
+        })
         assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
 
-        $(document.activeElement).trigger($.Event('keydown', {
+        EventHandler.trigger(document.activeElement, 'keydown', {
           which: 40
-        }))
+        })
         assert.ok($(document.activeElement).is($('#item2')), 'item2 is focused')
 
-        $(document.activeElement).trigger($.Event('keydown', {
+        EventHandler.trigger(document.activeElement, 'keydown', {
           which: 38
-        }))
+        })
         assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
         done()
       })
-    $dropdown.trigger('click')
+    EventHandler.trigger($dropdown[0], 'click')
   })
 
   QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) {
@@ -688,9 +699,9 @@ $(function () {
       .parent('.dropdown')
       .on('shown.bs.dropdown', function () {
         assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
-        $textfield.trigger($.Event('click'))
+        EventHandler.trigger($textfield[0], 'click')
       })
-    $dropdown.trigger('click')
+    EventHandler.trigger($dropdown[0], 'click')
   })
 
   QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {
@@ -717,9 +728,9 @@ $(function () {
       .parent('.dropdown')
       .on('shown.bs.dropdown', function () {
         assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
-        $textarea.trigger($.Event('click'))
+        EventHandler.trigger($textarea[0], 'click')
       })
-    $dropdown.trigger('click')
+    EventHandler.trigger($dropdown[0], 'click')
   })
 
   QUnit.test('Dropdown should not use Popper.js in navbar', function (assert) {
@@ -748,7 +759,7 @@ $(function () {
         assert.ok(typeof $dropdownMenu.attr('style') === 'undefined', 'No inline style applied by Popper.js')
         done()
       })
-    $triggerDropdown.trigger($.Event('click'))
+    EventHandler.trigger($triggerDropdown[0], 'click')
   })
 
   QUnit.test('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', function (assert) {
@@ -810,14 +821,16 @@ $(function () {
         assert.ok($(document.activeElement)[0] === $textarea[0], 'textarea still focused')
 
         // Key escape
-        $input.trigger('focus').trigger($.Event('keydown', {
+        $input.trigger('focus')
+        EventHandler.trigger($input[0], 'keydown', {
           which: 27
-        }))
+        })
+
         assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
         done()
       })
 
-    $dropdown.trigger('click')
+    EventHandler.trigger($dropdown[0], 'click')
   })
 
   QUnit.test('should ignore space key events for <input>s within dropdown, and accept up, down and escape', function (assert) {
@@ -857,35 +870,40 @@ $(function () {
         assert.ok($(document.activeElement).is($input), 'input is still focused')
 
         // Key escape
-        $input.trigger('focus').trigger($.Event('keydown', {
+        $input.trigger('focus')
+        EventHandler.trigger($input[0], 'keydown', {
           which: 27
-        }))
+        })
         assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
 
         $dropdown
           .parent('.dropdown')
           .one('shown.bs.dropdown', function () {
+            assert.ok(true, 'shown was fired')
+
             // Key down
-            $input.trigger('focus').trigger($.Event('keydown', {
+            $input.trigger('focus')
+            EventHandler.trigger($input[0], 'keydown', {
               which: 40
-            }))
+            })
             assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
 
             $dropdown
               .parent('.dropdown')
               .one('shown.bs.dropdown', function () {
                 // Key up
-                $input.trigger('focus').trigger($.Event('keydown', {
+                $input.trigger('focus')
+                EventHandler.trigger($input[0], 'keydown', {
                   which: 38
-                }))
+                })
                 assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
                 done()
               }).bootstrapDropdown('toggle')
-            $input.trigger('click')
+            EventHandler.trigger($input[0], 'click')
           })
-        $input.trigger('click')
+        EventHandler.trigger($input[0], 'click')
       })
-    $input.trigger('click')
+    EventHandler.trigger($input[0], 'click')
   })
 
   QUnit.test('should ignore space key events for <textarea>s within dropdown, and accept up, down and escape', function (assert) {
@@ -925,35 +943,40 @@ $(function () {
         assert.ok($(document.activeElement).is($textarea), 'textarea is still focused')
 
         // Key escape
-        $textarea.trigger('focus').trigger($.Event('keydown', {
+        $textarea.trigger('focus')
+        EventHandler.trigger($textarea[0], 'keydown', {
           which: 27
-        }))
+        })
         assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
 
         $dropdown
           .parent('.dropdown')
           .one('shown.bs.dropdown', function () {
+            assert.ok(true, 'shown was fired')
+
             // Key down
-            $textarea.trigger('focus').trigger($.Event('keydown', {
+            $textarea.trigger('focus')
+            EventHandler.trigger($textarea[0], 'keydown', {
               which: 40
-            }))
+            })
             assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
 
             $dropdown
               .parent('.dropdown')
               .one('shown.bs.dropdown', function () {
                 // Key up
-                $textarea.trigger('focus').trigger($.Event('keydown', {
+                $textarea.trigger('focus')
+                EventHandler.trigger($textarea[0], 'keydown', {
                   which: 38
-                }))
+                })
                 assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
                 done()
               }).bootstrapDropdown('toggle')
-            $textarea.trigger('click')
+            EventHandler.trigger($textarea[0], 'click')
           })
-        $textarea.trigger('click')
+        EventHandler.trigger($textarea[0], 'click')
       })
-    $textarea.trigger('click')
+    EventHandler.trigger($textarea[0], 'click')
   })
 
   QUnit.test('should not use Popper.js if display set to static', function (assert) {
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index d1bb0ed35..2fbfd50dd 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -61,6 +61,12 @@
 
       <div class="row">
         <div class="col-sm-12 mt-4">
+          <div class="dropdown">
+            <button type="button" class="btn btn-secondary" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
+            <div class="dropdown-menu">
+              <input id="textField" type="text">
+            </div>
+          </div>
           <div class="btn-group dropup">
             <button type="button" class="btn btn-secondary">Dropup split</button>
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
@@ -206,6 +212,9 @@
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
+    <script src="../../dist/dom/data.js"></script>
+    <script src="../../dist/dom/selectorEngine.js"></script>
+    <script src="../../dist/dom/manipulator.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/dropdown.js"></script>
     <script src="../../dist/collapse.js"></script>