diff --git a/app/helpers/columns_helper.rb b/app/helpers/columns_helper.rb index c6f3fc850..caabe589d 100644 --- a/app/helpers/columns_helper.rb +++ b/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", diff --git a/app/javascript/controllers/navigable_list_controller.js b/app/javascript/controllers/navigable_list_controller.js index 8a83e5dd7..0eedf6dd3 100644 --- a/app/javascript/controllers/navigable_list_controller.js +++ b/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)) } }, diff --git a/app/views/boards/show/_columns.html.erb b/app/views/boards/show/_columns.html.erb index 5f44bc4df..931a93616 100644 --- a/app/views/boards/show/_columns.html.erb +++ b/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,