Add `getNextActiveElement` helper function to utils, replacing custom implementation through components (#33608)

1 files changed, 6 insertions, 16 deletions

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 565edb8929..cab2d018bb 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -16,6 +16,7 @@ import {
   isVisible,
   isRTL,
   noop,
+  getNextActiveElement,
   typeCheckConfig
 } from './util/index'
 import Data from './dom/data'
@@ -354,28 +355,17 @@ class Dropdown extends BaseComponent {
   }
 
   _selectMenuItem(event) {
-    const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(isVisible)
-
-    if (!items.length) {
+    if (![ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)) {
       return
     }
 
-    let index = items.indexOf(event.target)
-
-    // Up
-    if (event.key === ARROW_UP_KEY && index > 0) {
-      index--
-    }
+    const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(isVisible)
 
-    // Down
-    if (event.key === ARROW_DOWN_KEY && index < items.length - 1) {
-      index++
+    if (!items.length) {
+      return
     }
 
-    // index is -1 if the first keydown is an ArrowUp
-    index = index === -1 ? 0 : index
-
-    items[index].focus()
+    getNextActiveElement(items, event.target, event.key === ARROW_DOWN_KEY, false).focus()
   }
 
   // Static