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) {
-    element.setAttribute("disabled", "disabled")
-    element.setAttribute("aria-disabled", "true")
-    element.setAttribute("tabindex", "-1")
-}
+Turbo.StreamElement.prototype.disableElement = disableElement
+Turbo.StreamElement.prototype.enableElement = enableElement
 Turbo.StreamActions.disable = function() {
-  this.targetElements.forEach((e) => { this.disableElement(e) })
-}
-
-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")
+  this.targetElements.forEach(disableElement)
 }
 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

@@ -22,30 +22,4 @@ export default class extends Controller {
       event.preventDefault()
     }
   }
-
-  cancel(event) {
-    event.preventDefault()
-    const el = this.element
-
-    // Move focus to next open form if this one had focus
-    const focused = document.activeElement
-    if (!focused || focused === document.body || el.contains(focused)) {
-      const next = el.parentElement?.querySelector(`#${el.id} ~ tr:has([autofocus])`)
-        ?? el.parentElement?.querySelector("tr:has([autofocus])")
-      next?.querySelector("[autofocus]")?.focus()
-    }
-
-    // Remove associated inner form element (tabular: <tr> wraps a separate <form>)
-    document.getElementById(el.dataset.form)?.remove()
-
-    // Re-enable trigger link
-    const enableId = el.dataset.link ?? el.dataset.cancelEnable
-    if (enableId) Turbo.StreamElement.prototype.enableElement(document.getElementById(enableId))
-
-    // Show hidden row (tabular forms) or no-items placeholder (create form)
-    document.getElementById(el.dataset.hiddenRow)?.removeAttribute("style")
-    document.getElementById(el.dataset.cancelShow)?.style.removeProperty("display")
-
-    el.remove()
-  }
 }

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/_edit_form.html.erb

@@ -19,7 +19,7 @@
       <%= form.button %>
       <%= image_link_to t(:cancel), "close-outline", measurements_path,
         class: 'dangerous', name: :cancel,
-        data: {action: 'click->form#cancel'} %>
+        onclick: render_turbo_stream('edit_form_close', {row: row}) %>
     </td>
   <% end %>
 <% end %>

app/views/measurements/_edit_form_close.html.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.close_form row %>
+<%= turbo_stream.update :flashes %>

app/views/measurements/_edit_panel.html.erb

@@ -26,7 +26,7 @@
           <%= form.button %>
           <%= image_link_to t(:cancel), "close-outline", measurements_path,
             class: 'dangerous', name: :cancel,
-            data: {action: 'click->form#cancel'} %>
+            onclick: render_turbo_stream('edit_form_close', {row: row}) %>
         </td>
       <% end %>
     </tbody>

app/views/measurements/_form.html.erb

@@ -1,8 +1,6 @@
 <%= tabular_form_with model: Measurement.new, id: :measurement_form,
   class: 'topside-area flex vertical center',
-  html: {data: {controller: 'form', action: 'keydown->form#processKey',
-                cancel_enable: 'new_measurement_link',
-                cancel_show: 'no_items'}} do |form| %>
+  html: {data: {controller: 'form', action: 'keydown->form#processKey'}} do |form| %>
 
   <table class="items-table center">
     <tbody id="readouts">
@@ -36,6 +34,6 @@
   <div class="flex reverse">
     <%= form.button id: :create_measurement_button, disabled: true -%>
     <%= image_link_to t(:cancel), "close-outline", measurements_path, name: :cancel,
-      class: 'dangerous', data: {action: 'click->form#cancel'} %>
+      class: 'dangerous', onclick: render_turbo_stream('form_close') %>
   </div>
 <% end %>

app/views/measurements/_form_close.html.erb

@@ -0,0 +1,4 @@
+<%= turbo_stream.update :flashes %>
+<%= turbo_stream.remove :measurement_form %>
+<%= turbo_stream.show :no_items -%>
+<%= turbo_stream.enable :new_measurement_link -%>

app/views/quantities/_form.html.erb

@@ -18,7 +18,7 @@
     <td class="flex">
       <%= form.button %>
       <%= image_link_to t(:cancel), "close-outline", quantities_path, class: 'dangerous',
-        name: :cancel, data: {action: 'click->form#cancel'} %>
+        name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
     </td>
     <td></td>
   <% end %>

app/views/quantities/_form_close.html.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.close_form row %>
+<%= turbo_stream.update :flashes %>

app/views/units/_form.html.erb

@@ -16,7 +16,7 @@
     <td class="flex">
       <%= form.button %>
       <%= image_link_to t(:cancel), "close-outline", units_path, class: 'dangerous',
-        name: :cancel, data: {action: 'click->form#cancel'} %>
+        name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
     </td>
     <td></td>
   <% end %>

app/views/units/_form_close.html.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.close_form row %>
+<%= turbo_stream.update :flashes %>

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