Rename properties

app/helpers/columns_helper.rb

@@ -28,7 +28,7 @@ module ColumnsHelper
     tag.section(id: id, class: classes, tabindex: "0", "aria-selected": selected, data: data, **properties) do
       tag.div(class: "cards__transition-container", data: {
         controller: "navigable-list",
-        navigable_list_support_horizontal_navigation_value: "false",
+        navigable_list_supports_horizontal_navigation_value: "false",
         navigable_list_prevent_handled_keys_value: "true",
         navigable_list_auto_select_value: "false",
         navigable_list_actionable_items_value: "true",

app/javascript/controllers/navigable_list_controller.js

@@ -9,8 +9,8 @@ export default class extends Controller {
     focusOnSelection: { type: Boolean, default: true },
     actionableItems: { type: Boolean, default: false },
     reverseNavigation: { type: Boolean, default: false },
-    supportHorizontalNavigation: { type: Boolean, default: true },
-    supportVerticalNavigation: { type: Boolean, default: true },
+    supportsHorizontalNavigation: { type: Boolean, default: true },
+    supportsVerticalNavigation: { type: Boolean, default: true },
     hasNestedNavigation: { type: Boolean, default: false },
     preventHandledKeys: { type: Boolean, default: false },
     autoSelect: { type: Boolean, default: true }
@@ -132,13 +132,17 @@ export default class extends Controller {
   }
 
   #clickCurrentItem(event) {
-    if (this.actionableItemsValue && this.currentItem && this.#visibleItems.length) {
+    if (this.actionableItemsValue && this.currentItem && this.#visibleItems.length && this.#isFocusContainedOnNavigableItem) {
       const clickableElement = this.currentItem.querySelector("a,button") || this.currentItem
       clickableElement.click()
       event.preventDefault()
     }
   }
 
+  get #isFocusContainedOnNavigableItem() {
+    return this.itemTargets.some(item => item.contains(document.activeElement))
+  }
+
   #toggleCurrentItem(event) {
     if (this.actionableItemsValue && this.currentItem && this.#visibleItems.length) {
       const toggleable = this.currentItem.querySelector("input[type=checkbox]")
@@ -185,24 +189,24 @@ export default class extends Controller {
 
   #keyHandlers = {
     ArrowDown(event) {
-      if (this.supportVerticalNavigationValue) {
+      if (this.supportsVerticalNavigationValue) {
         const selectMethod = this.reverseNavigationValue ? this.#selectPrevious.bind(this) : this.#selectNext.bind(this)
         this.#handleArrowKey(event, selectMethod)
       }
     },
     ArrowUp(event) {
-      if (this.supportVerticalNavigationValue) {
+      if (this.supportsVerticalNavigationValue) {
         const selectMethod = this.reverseNavigationValue ? this.#selectNext.bind(this) : this.#selectPrevious.bind(this)
         this.#handleArrowKey(event, selectMethod)
       }
     },
     ArrowRight(event) {
-      if (this.supportHorizontalNavigationValue) {
+      if (this.supportsHorizontalNavigationValue) {
         this.#handleArrowKey(event, this.#selectNext.bind(this))
       }
     },
     ArrowLeft(event) {
-      if (this.supportHorizontalNavigationValue) {
+      if (this.supportsHorizontalNavigationValue) {
         this.#handleArrowKey(event, this.#selectPrevious.bind(this))
       }
     },

app/views/boards/show/_columns.html.erb

@@ -6,7 +6,7 @@
       collapsible_columns_collapsed_class: "is-collapsed",
       collapsible_columns_no_transitions_class: "no-transitions",
       collapsible_columns_title_not_visible_class: "is-off-screen",
-      navigable_list_support_vertical_navigation_value: false,
+      navigable_list_supports_vertical_navigation_value: false,
       navigable_list_has_nested_navigation_value: true,
       navigable_list_prevent_handled_keys_value: true,
       navigable_list_auto_select_value: false,