diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index 8447be60bb..a6a2ec3b0b 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -1814,6 +1814,81 @@ describe('Dropdown', () => {
})
})
+ it('should cycle and focus on the last item when using ArrowUp for the first time, respectively with ArrowDown', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '
',
+ ' Dropdown ',
+ ' ',
+ '
'
+ ].join('')
+
+ const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const triggerItem1 = fixtureEl.querySelector('#item1')
+ const triggerItem2 = fixtureEl.querySelector('#item2')
+
+ const keydown = createEvent('keydown')
+ keydown.key = 'ArrowDown'
+
+ const keydown2 = createEvent('keydown')
+ keydown2.key = 'ArrowUp'
+
+ triggerDropdown.dispatchEvent(keydown)
+ triggerItem1.dispatchEvent(keydown2)
+
+ setTimeout(() => {
+ expect(document.activeElement).toEqual(triggerItem2, 'item2 is focused')
+ triggerItem2.dispatchEvent(keydown)
+
+ setTimeout(() => {
+ expect(document.activeElement).toEqual(triggerItem1, 'item1 is focused')
+ resolve()
+ }, 20)
+ }, 20)
+ })
+ })
+
+ it('should not cycle and stay focus on the first item when using ArrowUp and respectively with last item and ArrowDown', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Dropdown ',
+ ' ',
+ '
'
+ ].join('')
+
+ const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const triggerItem1 = fixtureEl.querySelector('#item1')
+ const triggerItem2 = fixtureEl.querySelector('#item2')
+
+ const keydown = createEvent('keydown')
+ keydown.key = 'ArrowDown'
+
+ const keydown2 = createEvent('keydown')
+ keydown2.key = 'ArrowUp'
+
+ triggerDropdown.dispatchEvent(keydown)
+ triggerItem1.dispatchEvent(keydown2)
+
+ setTimeout(() => {
+ expect(document.activeElement).toEqual(triggerItem1, 'item1 is focused')
+ triggerItem1.dispatchEvent(keydown)
+ triggerItem2.dispatchEvent(keydown)
+
+ setTimeout(() => {
+ expect(document.activeElement).toEqual(triggerItem2, 'item2 is focused')
+ resolve()
+ }, 20)
+ }, 20)
+ })
+ })
+
it('should not close the dropdown if the user clicks on a text field within dropdown-menu', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [