Extract method

app/javascript/controllers/navigable_list_controller.js

@@ -37,15 +37,8 @@ export default class extends Controller {
 
   navigate(event) {
     this.#keyHandlers[event.key]?.call(this, event)
-
-    const parentNavigableList = this.element.parentElement?.closest('[data-controller~="navigable-list"]')
-    if (parentNavigableList) {
-      const parentController = this.application.getControllerForElementAndIdentifier(parentNavigableList, "navigable-list")
-      if (parentController) {
-        parentNavigableList.focus()
-        parentController.navigate(event)
-      }
-    }
+    // Stimulus won't let you handle keydown events with different handlers for the same (nested) stimulus controllers.
+    this.#relayNavigationToParentNavigableList(event)
   }
 
   select({ target }) {
@@ -180,6 +173,17 @@ export default class extends Controller {
     return null
   }
 
+  #relayNavigationToParentNavigableList(event) {
+    const parentNavigableList = this.element.parentElement?.closest('[data-controller~="navigable-list"]')
+    if (parentNavigableList) {
+      const parentController = this.application.getControllerForElementAndIdentifier(parentNavigableList, "navigable-list")
+      if (parentController) {
+        parentNavigableList.focus()
+        parentController.navigate(event)
+      }
+    }
+  }
+
   #keyHandlers = {
     ArrowDown(event) {
       if (this.supportVerticalNavigationValue) {