From 20a0e2be9bd0bbe7200d2705af507b7c6c8d0f7a Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@hey.com>
Date: Thu, 20 Nov 2025 13:42:25 +0100
Subject: [PATCH] Extract method

---
 .../controllers/navigable_list_controller.js  | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/app/javascript/controllers/navigable_list_controller.js b/app/javascript/controllers/navigable_list_controller.js
index 5c3f1a618..48e20e351 100644
--- a/app/javascript/controllers/navigable_list_controller.js
+++ b/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) {