Move dialog focus handling to a stimulus controller

... for template caching

app/helpers/filters_helper.rb

@@ -33,7 +33,7 @@ module FiltersHelper
     tag.dialog class: "margin-block-start-half popup panel flex-column align-start gap-half fill-white shadow txt-small", data: {
       action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset toggle->filter#filter",
       aria: { label: label, aria_description: label },
-      controller: "navigable-list",
+      controller: "navigable-list dialog-focus",
       dialog_target: "dialog",
       navigable_list_focus_on_selection_value: false,
       navigable_list_actionable_items_value: true
@@ -41,7 +41,7 @@ module FiltersHelper
   end
 
   def filter_title(title)
-    tag.strong title, class: "popup__title", tabindex: (-1 if platform.mobile?), autofocus: platform.mobile?
+    tag.strong title, class: "popup__title", tabindex: "-1", data: { dialog_focus_target: "touch" }
   end
 
   def collapsible_nav_section(title, **properties, &block)

app/javascript/controllers/dialog_focus_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+import { isTouchDevice } from "helpers/platform_helpers"
+
+export default class extends Controller {
+  static targets = [ "mouse", "touch" ]
+
+  connect() {
+    this.#setup()
+  }
+
+  #setup() {
+    const touch = isTouchDevice()
+    if (this.hasMouseTarget) this.mouseTarget.autofocus = !touch
+    if (this.hasTouchTarget) this.touchTarget.autofocus = touch
+  }
+}

app/views/events/index/filter/_board.html.erb

@@ -17,8 +17,8 @@
 
   <%= filter_dialog "Board…" do %>
     <%= filter_title "Board…" %>
-    <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small font-weight-normal", autofocus: !platform.mobile?,
-          type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+    <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small font-weight-normal", autofocus: true,
+          type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_focus_target: "mouse", action: "input->filter#filter" } %>
 
     <ul class="popup__list" data-filter-target="list" role="listbox">
       <% user_filtering.boards.each do |board| %>

app/views/events/index/filter/_user.html.erb

@@ -17,8 +17,8 @@
 
   <%= filter_dialog "Person…" do %>
     <%= filter_title "Person…" %>
-    <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small font-weight-normal", autofocus: !platform.mobile?,
-          type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+    <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small font-weight-normal", autofocus: true,
+          type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_focus_target: "mouse", action: "input->filter#filter" } %>
 
     <ul class="popup__list" data-filter-target="list" role="listbox">
       <% user_filtering.users.each do |user| %>

app/views/filters/settings/_assignees.html.erb

@@ -18,8 +18,8 @@
     <%= filter_dialog "Assigned to…" do %>
       <%= filter_title "Assigned to…" %>
       <% if Current.account.users.active.many? %>
-        <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: !platform.mobile?,
-              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+        <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
+              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_focus_target: "mouse", action: "input->filter#filter" } %>
       <% end %>
 
       <ul class="popup__list" data-filter-target="list" role="listbox">

app/views/filters/settings/_boards.html.erb

@@ -19,8 +19,8 @@
     <%= filter_dialog "Board…" do %>
       <%= filter_title "Board…" %>
       <% if user_filtering.boards.many? %>
-        <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: !platform.mobile?,
-              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+        <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
+              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_focus_target: "mouse", action: "input->filter#filter" } %>
       <% end %>
 
       <ul class="popup__list" data-filter-target="list" role="listbox">

app/views/filters/settings/_closers.html.erb

@@ -19,8 +19,8 @@
     <%= filter_dialog "Closed by…" do %>
       <%= filter_title "Closed by…" %>
       <% if user_filtering.users.many? %>
-        <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: !platform.mobile?,
-              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+        <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
+              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_focus_target: "mouse", action: "input->filter#filter" } %>
       <% end %>
 
       <ul class="popup__list" data-filter-target="list" role="listbox">

app/views/filters/settings/_creators.html.erb

@@ -19,8 +19,8 @@
     <%= filter_dialog "Added by…" do %>
       <%= filter_title "Added by…" %>
       <% if user_filtering.users.many? %>
-        <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: !platform.mobile?,
-              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+        <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
+              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_focus_target: "mouse", action: "input->filter#filter" } %>
       <% end %>
 
       <ul class="popup__list" data-filter-target="list" role="listbox">

app/views/filters/settings/_tags.html.erb

@@ -17,8 +17,8 @@
   <%= filter_dialog "Tagged…" do %>
     <%= filter_title "Tagged…" %>
     <% if user_filtering.tags.many? %>
-      <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: !platform.mobile?,
-            type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+      <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
+            type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_focus_target: "mouse", action: "input->filter#filter" } %>
     <% end %>
 
     <ul class="popup__list" data-filter-target="list" role="listbox">