diff options
author | alpadev <2838324+alpadev@users.noreply.github.com> | 2021-05-11 09:09:00 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-05-11 09:09:00 +0300 |
commit | 7647b8fe5b77120ba319e7119bb0515d91f734da (patch) | |
tree | 5c335c0bc9ba8522af380b02ed980d83404de921 /js/tests | |
parent | 03842b5f259d6007db02c465e6c55929e551e9cd (diff) |
Fix: Click on input outside of dropdown-menu prevents dropdown from closing (#33920)
* test: add test if user clicks on input not contained within dropdown-menu
* fix: click on inputs that are not contained within dropdown-menu prevent dropdown from closing
Diffstat (limited to 'js/tests')
-rw-r--r-- | js/tests/unit/dropdown.spec.js | 30 |
1 files changed, 28 insertions, 2 deletions
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index 57989059d1..1c3e8652f3 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -1587,7 +1587,7 @@ describe('Dropdown', () => { triggerDropdown.click() }) - it('should not close the dropdown if the user clicks on a text field', done => { + it('should not close the dropdown if the user clicks on a text field within dropdown-menu', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', @@ -1613,7 +1613,7 @@ describe('Dropdown', () => { triggerDropdown.click() }) - it('should not close the dropdown if the user clicks on a textarea', done => { + it('should not close the dropdown if the user clicks on a textarea within dropdown-menu', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', @@ -1639,6 +1639,32 @@ describe('Dropdown', () => { triggerDropdown.click() }) + it('should close the dropdown if the user clicks on a text field that is not contained within dropdown-menu', done => { + fixtureEl.innerHTML = [ + '<div class="dropdown">', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', + ' <div class="dropdown-menu">', + ' </div>', + '</div>', + '<input type="text">' + ] + + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') + const input = fixtureEl.querySelector('input') + + triggerDropdown.addEventListener('hidden.bs.dropdown', () => { + done() + }) + + triggerDropdown.addEventListener('shown.bs.dropdown', () => { + input.dispatchEvent(createEvent('click', { + bubbles: true + })) + }) + + triggerDropdown.click() + }) + it('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', |