From 61fbad218b8bb27f33d1562795b59b422ea30148 Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@37signals.com>
Date: Mon, 2 Jun 2025 18:39:44 +0200
Subject: [PATCH] Make tag filters selectable/navigable too

---
 app/assets/stylesheets/popup.css               |  4 ++++
 .../controllers/navigable_list_controller.js   |  7 ++++---
 app/views/cards/taggings/new.html.erb          | 18 +++++++++++++-----
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index b97f243af..4dafb7603 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -81,6 +81,10 @@
       }
     }
 
+    &[aria-selected] {
+      --btn-background: var(--color-selected);
+    }
+
     &:has(input:checked)  {
       --btn-background: var(--color-ink-lightest);
       --btn-color: var(--color-ink);
diff --git a/app/javascript/controllers/navigable_list_controller.js b/app/javascript/controllers/navigable_list_controller.js
index a1af5a938..a1dbd7f45 100644
--- a/app/javascript/controllers/navigable_list_controller.js
+++ b/app/javascript/controllers/navigable_list_controller.js
@@ -92,10 +92,11 @@ export default class extends Controller {
     event.preventDefault()
   }
 
-  #triggerActionOnCurrentItem() {
-    if (this.actionableItemsValue && this.currentItem) {
+  #triggerActionOnCurrentItem(event) {
+    if (this.actionableItemsValue && this.currentItem && this.#visibleItems.length) {
       const clickableElement = this.currentItem.querySelector("a,button") || this.currentItem
       clickableElement.click()
+      event.preventDefault()
     }
   }
 
@@ -113,7 +114,7 @@ export default class extends Controller {
       this.#handleArrowKey(event, this.#selectPrevious.bind(this))
     },
     Enter(event) {
-      this.#triggerActionOnCurrentItem()
+      this.#triggerActionOnCurrentItem(event)
     }
   }
 }
diff --git a/app/views/cards/taggings/new.html.erb b/app/views/cards/taggings/new.html.erb
index e41bcf69d..a6f6ec65d 100644
--- a/app/views/cards/taggings/new.html.erb
+++ b/app/views/cards/taggings/new.html.erb
@@ -1,9 +1,16 @@
 <%= turbo_frame_tag @card, :tagging do %>
-  <dialog class="popup panel flex-column align-start justify-start fill-white shadow" data-dialog-target="dialog">
+  <dialog class="popup panel flex-column align-start justify-start fill-white shadow"
+    data-controller="filter navigable-list"
+    data-dialog-target="dialog filter navigable-list"
+    data-navigable-list-focus-on-selection-value="false"
+    data-navigable-list-actionable-items-value="true"
+    data-action="keydown->navigable-list#navigate filter:changed->navigable-list#reset"
+  >
     <strong class="popup__title margin-block-end-half pad-inline-half">Tag this…</strong>
 
     <%= form_with url: card_taggings_path(@card), class: "flex gap-half align-center full-width pad-inline-half margin-block-end" do |form| %>
-      <%= form.text_field :tag_title, placeholder: "New tag name...", class: "input txt-small full-width", autocomplete: "off" %>
+      <%= form.text_field :tag_title, placeholder: "New tag name...", class: "input txt-small full-width",
+            autocomplete: "off", data: { filter_target: "input", action: "input->filter#filter" } %>
       <%= form.button "Add a tag…", type: "submit", class: "btn txt-small" do %>
         <%= icon_tag "add" %>
         <span class="for-screen-reader">Add a tag</span>
@@ -12,9 +19,10 @@
 
     <div class="flex flex-column full-width popup__list">
       <% @tags.each do |tag| %>
-          <%= button_to card_taggings_path(@card, params: { tag_title: tag.title }), method: :post, class: "btn full-width popup__item" do %>
-            <span class="overflow-ellipsis"><%= tag.hashtag %></span>
-            <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" if @card.tagged_with?(tag) %>
+        <%= button_to card_taggings_path(@card, params: { tag_title: tag.title }),
+              method: :post, class: "btn full-width popup__item", data: { filter_target: "item", navigable_list_target: "item" } do %>
+          <span class="overflow-ellipsis"><%= tag.hashtag %></span>
+          <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" if @card.tagged_with?(tag) %>
         <% end %>
       <% end %>
     </div>