[Bug Fix] Wrap Toggle in span so hidden input is a Stimulus target; ThemeToggle uses wrapper kwarg to compose controllers

Author: djalmaaraujo

docs/app/javascript/controllers/ruby_ui/theme_toggle_controller.js

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="ruby-ui--theme-toggle"
-// Expects to sit on the same element as ruby-ui--toggle and listen to its
+// Sits on the same wrapper as ruby-ui--toggle. Listens for the toggle's
 // ruby-ui--toggle:change event. pressed = dark mode.
 export default class extends Controller {
   connect() {
@@ -30,9 +30,9 @@ export default class extends Controller {
       html.classList.add("light")
       html.classList.remove("dark")
     }
+    // Flip the sibling Toggle controller's pressed value; it will propagate
+    // aria-pressed / data-state to the button target.
     const dark = theme === "dark"
-    this.element.setAttribute("aria-pressed", dark ? "true" : "false")
-    this.element.dataset.state = dark ? "on" : "off"
     this.element.setAttribute("data-ruby-ui--toggle-pressed-value", dark ? "true" : "false")
   }
 }

docs/app/javascript/controllers/ruby_ui/toggle_controller.js

@@ -1,22 +1,26 @@
 import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="ruby-ui--toggle"
+// Sits on a wrapper element; the visible <button> and optional hidden <input>
+// are descendants so Stimulus can target them.
 export default class extends Controller {
-  static targets = ["input"]
+  static targets = ["button", "input"]
   static values = {
     pressed: Boolean,
     value: String,
     unpressedValue: String
   }
 
   toggle(event) {
-    if (this.element.disabled) return
+    if (this.buttonTarget.disabled) return
     this.pressedValue = !this.pressedValue
   }
 
   pressedValueChanged(current, previous) {
-    this.element.setAttribute("aria-pressed", current ? "true" : "false")
-    this.element.dataset.state = current ? "on" : "off"
+    if (this.hasButtonTarget) {
+      this.buttonTarget.setAttribute("aria-pressed", current ? "true" : "false")
+      this.buttonTarget.dataset.state = current ? "on" : "off"
+    }
 
     if (this.hasInputTarget) {
       this.inputTarget.value = current ? this.valueValue : this.unpressedValueValue

gem/lib/ruby_ui/theme_toggle/theme_toggle.rb

@@ -7,9 +7,11 @@ def view_template(&block)
         variant: :default,
         size: :default,
         aria: {label: "Toggle theme"},
-        data: {
-          controller: "ruby-ui--toggle ruby-ui--theme-toggle",
-          action: "ruby-ui--toggle:change->ruby-ui--theme-toggle#apply"
+        wrapper: {
+          data: {
+            controller: "ruby-ui--theme-toggle",
+            action: "ruby-ui--toggle:change->ruby-ui--theme-toggle#apply"
+          }
         },
         **attrs,
         &block

gem/lib/ruby_ui/theme_toggle/theme_toggle_controller.js

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="ruby-ui--theme-toggle"
-// Expects to sit on the same element as ruby-ui--toggle and listen to its
+// Sits on the same wrapper as ruby-ui--toggle. Listens for the toggle's
 // ruby-ui--toggle:change event. pressed = dark mode.
 export default class extends Controller {
   connect() {
@@ -30,9 +30,9 @@ export default class extends Controller {
       html.classList.add("light")
       html.classList.remove("dark")
     }
+    // Flip the sibling Toggle controller's pressed value; it will propagate
+    // aria-pressed / data-state to the button target.
     const dark = theme === "dark"
-    this.element.setAttribute("aria-pressed", dark ? "true" : "false")
-    this.element.dataset.state = dark ? "on" : "off"
     this.element.setAttribute("data-ruby-ui--toggle-pressed-value", dark ? "true" : "false")
   }
 }

gem/lib/ruby_ui/toggle/toggle.rb

@@ -36,6 +36,7 @@ def initialize(
       variant: :default,
       size: :default,
       disabled: false,
+      wrapper: {},
       **attrs
     )
       @pressed = pressed
@@ -45,16 +46,36 @@ def initialize(
       @variant = variant.to_sym
       @size = size.to_sym
       @disabled = disabled
+      @wrapper = wrapper
       super(**attrs)
     end
 
     def view_template(&block)
-      button(**attrs, &block)
-      render_hidden_input if @name
+      span(**wrapper_attrs) do
+        button(**attrs, &block)
+        render_hidden_input if @name
+      end
     end
 
     private
 
+    def wrapper_attrs
+      mix(wrapper_default_attrs, @wrapper)
+    end
+
+    def wrapper_default_attrs
+      {
+        class: "contents",
+        data: {
+          controller: "ruby-ui--toggle",
+          action: "click->ruby-ui--toggle#toggle",
+          "ruby-ui--toggle-pressed-value": @pressed.to_s,
+          "ruby-ui--toggle-value-value": @value.to_s,
+          "ruby-ui--toggle-unpressed-value-value": @unpressed_value.to_s
+        }
+      }
+    end
+
     def render_hidden_input
       input(
         type: "hidden",
@@ -71,11 +92,7 @@ def default_attrs
         aria: {pressed: @pressed.to_s},
         data: {
           state: @pressed ? "on" : "off",
-          controller: "ruby-ui--toggle",
-          action: "click->ruby-ui--toggle#toggle",
-          "ruby-ui--toggle-pressed-value": @pressed.to_s,
-          "ruby-ui--toggle-value-value": @value.to_s,
-          "ruby-ui--toggle-unpressed-value-value": @unpressed_value.to_s
+          "ruby-ui--toggle-target": "button"
         },
         class: self.class.classes_for(variant: @variant, size: @size)
       )

gem/lib/ruby_ui/toggle/toggle_controller.js

@@ -1,22 +1,26 @@
 import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="ruby-ui--toggle"
+// Sits on a wrapper element; the visible <button> and optional hidden <input>
+// are descendants so Stimulus can target them.
 export default class extends Controller {
-  static targets = ["input"]
+  static targets = ["button", "input"]
   static values = {
     pressed: Boolean,
     value: String,
     unpressedValue: String
   }
 
   toggle(event) {
-    if (this.element.disabled) return
+    if (this.buttonTarget.disabled) return
     this.pressedValue = !this.pressedValue
   }
 
   pressedValueChanged(current, previous) {
-    this.element.setAttribute("aria-pressed", current ? "true" : "false")
-    this.element.dataset.state = current ? "on" : "off"
+    if (this.hasButtonTarget) {
+      this.buttonTarget.setAttribute("aria-pressed", current ? "true" : "false")
+      this.buttonTarget.dataset.state = current ? "on" : "off"
+    }
 
     if (this.hasInputTarget) {
       this.inputTarget.value = current ? this.valueValue : this.unpressedValueValue