Extract disableElement/enableElement to shared module

Stimulus controllers were reaching into Turbo.StreamElement.prototype
to call disableElement/enableElement — tight coupling to Turbo internals.

Extract both functions to app/javascript/element_helpers.js and import
from there in application.js (which still assigns them to the Turbo
prototype for server-driven Turbo Stream actions), details_controller,
and readout_unit_controller.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/javascript/application.js

@@ -2,6 +2,7 @@
 // https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+import { disableElement, enableElement } from "element_helpers"
 
 
 /* Hide page before loaded for testing purposes */
@@ -12,23 +13,13 @@ document.addEventListener('turbo:load', showPage)
 
 
 /* Turbo stream actions */
-Turbo.StreamElement.prototype.disableElement = function(element) {
+Turbo.StreamElement.prototype.disableElement = disableElement
-    element.setAttribute("disabled", "disabled")
+Turbo.StreamElement.prototype.enableElement = enableElement
-    element.setAttribute("aria-disabled", "true")
-    element.setAttribute("tabindex", "-1")
-}
 Turbo.StreamActions.disable = function() {
-  this.targetElements.forEach((e) => { this.disableElement(e) })
+  this.targetElements.forEach(disableElement)
-}
-
-Turbo.StreamElement.prototype.enableElement = function(element) {
-    element.removeAttribute("disabled")
-    element.removeAttribute("aria-disabled")
-    // Assume 'tabindex' is not used explicitly, so removing it is safe
-    element.removeAttribute("tabindex")
 }
 Turbo.StreamActions.enable = function() {
-  this.targetElements.forEach((e) => { this.enableElement(e) })
+  this.targetElements.forEach(enableElement)
 }
 
 /* TODO: change to visibility = collapse to avoid width change? */

app/javascript/controllers/details_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { disableElement, enableElement } from "element_helpers"
 
 export default class extends Controller {
   static targets = ["countLabel", "submitButton", "list"]
@@ -18,10 +19,10 @@ export default class extends Controller {
     const count = this.element.querySelectorAll('input:checked:not([disabled])').length
     if (count > 0) {
       this.countLabelTarget.textContent = count + ' selected'
-      Turbo.StreamElement.prototype.enableElement(this.submitButtonTarget)
+      enableElement(this.submitButtonTarget)
     } else {
       this.countLabelTarget.textContent = this.countLabelTarget.dataset.prompt
-      Turbo.StreamElement.prototype.disableElement(this.submitButtonTarget)
+      disableElement(this.submitButtonTarget)
     }
   }
 

app/javascript/controllers/form_controller.js

@@ -1,14 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  connect() {
-    const autofocusEl = this.element.querySelector('[autofocus]')
-    if (autofocusEl) {
-      document.activeElement?.blur()
-      autofocusEl.focus()
-    }
-  }
-
   processKey(event) {
     switch (event.key) {
       case "Escape":

app/javascript/controllers/readout_unit_controller.js

@@ -1,13 +1,14 @@
 import { Controller } from "@hotwired/stimulus"
+import { disableElement, enableElement } from "element_helpers"
 
 export default class extends Controller {
   static targets = ["select", "button"]
 
   unitChanged() {
     if (this.selectTarget.value && this.selectTarget.value !== this.selectTarget.dataset.defaultUnitId) {
-      Turbo.StreamElement.prototype.enableElement(this.buttonTarget)
+      enableElement(this.buttonTarget)
     } else {
-      Turbo.StreamElement.prototype.disableElement(this.buttonTarget)
+      disableElement(this.buttonTarget)
     }
   }
 

app/javascript/element_helpers.js

@@ -0,0 +1,11 @@
+export function disableElement(element) {
+  element.setAttribute("disabled", "disabled")
+  element.setAttribute("aria-disabled", "true")
+  element.setAttribute("tabindex", "-1")
+}
+
+export function enableElement(element) {
+  element.removeAttribute("disabled")
+  element.removeAttribute("aria-disabled")
+  element.removeAttribute("tabindex")
+}

app/views/measurements/_readout.html.erb

@@ -4,7 +4,7 @@
   <td>
     <% if current_user.at_least(:active) %>
       <%= link_to readout.quantity, edit_measurement_path(readout),
-        class: 'link', data: {turbo_stream: true} %>
+        class: 'link', onclick: 'this.blur();', data: {turbo_stream: true} %>
     <% else %>
       <%= readout.quantity %>
     <% end %>

app/views/measurements/_wide_table.html.erb

@@ -20,7 +20,7 @@
                 <% if current_user.at_least(:active) %>
                   <%= link_to format("%.10g", readout.value),
                     edit_measurement_path(readout, view: :wide),
-                    class: 'link',
+                    class: 'link', onclick: 'this.blur();',
                     data: {turbo_stream: true} %>
                 <% else %>
                   <%= format("%.10g", readout.value) %>

app/views/measurements/index.html.erb

@@ -2,7 +2,7 @@
 <div class="rightside-area buttongrid" data-controller="measurements-view">
   <% if current_user.at_least(:active) %>
     <%= image_link_to t('.new_measurement'), 'plus-outline', new_measurement_path,
-      id: :new_measurement_link,
+      id: :new_measurement_link, onclick: 'this.blur();',
       data: {turbo_stream: true} %>
   <% end %>
   <%= image_button_tag '', 'view-rows', name: nil, type: 'button',

app/views/quantities/_quantity.html.erb

@@ -8,7 +8,7 @@
 
   <td style="--depth:<%= quantity.depth %>">
     <%= link_to quantity, edit_quantity_path(quantity), class: 'link',
-      data: {turbo_stream: true} %>
+      onclick: 'this.blur();', data: {turbo_stream: true} %>
   </td>
   <td><%= quantity.description %></td>
   <td><%= quantity.default_unit&.symbol %></td>
@@ -16,7 +16,7 @@
   <% if current_user.at_least(:active) %>
     <td class="flex">
       <%= image_link_to t('.new_subquantity'), 'plus-outline', new_quantity_path(quantity),
-        id: dom_id(quantity, :new, :link), data: {turbo_stream: true} %>
+        id: dom_id(quantity, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
 
       <%= image_button_to_if quantity.destroyable?, t('.destroy'), 'delete-outline',
         quantity_path(quantity), method: :delete %>

app/views/quantities/index.html.erb

@@ -1,7 +1,7 @@
 <div class="rightside-area buttongrid">
   <% if current_user.at_least(:active) %>
     <%= image_link_to t('.new_quantity'), 'plus-outline', new_quantity_path,
-      id: dom_id(Quantity, :new, :link),
+      id: dom_id(Quantity, :new, :link), onclick: 'this.blur();',
       data: {turbo_stream: true} %>
   <% end %>
   <%#= image_link_to t('.import_quantities'), 'download-outline', default_quantities_path,

app/views/units/_unit.html.erb

@@ -7,7 +7,7 @@
                   drag_drop_id_param_value: 'unit[base_id]'} do %>
 
   <td style="--depth:<%= unit.base_id? ? 1 : 0 %>">
-    <%= link_to unit, edit_unit_path(unit), class: 'link',
+    <%= link_to unit, edit_unit_path(unit), class: 'link', onclick: 'this.blur();',
       data: {turbo_stream: true} %>
   </td>
   <td><%= unit.description %></td>
@@ -17,7 +17,7 @@
     <td class="flex">
       <% unless unit.base_id? %>
         <%= image_link_to t('.new_subunit'), 'plus-outline', new_unit_path(unit),
-          id: dom_id(unit, :new, :link), data: {turbo_stream: true} %>
+          id: dom_id(unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
       <% end %>
 
       <%= image_button_to_if unit.movable?, t('.destroy'), 'delete-outline', unit_path(unit),

app/views/units/index.html.erb

@@ -1,7 +1,7 @@
 <div class="rightside-area buttongrid">
   <% if current_user.at_least(:active) %>
     <%= image_link_to t('.new_unit'), 'plus-outline', new_unit_path,
-      id: dom_id(Unit, :new, :link), data: {turbo_stream: true} %>
+      id: dom_id(Unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
   <% end %>
   <%= image_link_to t('.import_units'), 'download-outline', default_units_path,
     class: 'tools-area' %>

config/importmap.rb

@@ -1,6 +1,7 @@
 # Pin npm packages by running ./bin/importmap
 
 pin "application", preload: true
+pin "element_helpers"
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
 pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true