[WV2] Unify auto-submit behaviors into a shared web component

app/assets/javascripts/auto-submit-form.js

@@ -0,0 +1,27 @@
+/**
+ * AutoSubmitForm web component
+ *
+ * Generic progressive enhancement for forms that should auto-submit on change:
+ * - Listens for `change` events on descendant form inputs
+ * - Calls `requestSubmit()` on the nearest `<form>`
+ * - Exposes `:state(auto-loading)` to hide fallback submit buttons via CSS
+ */
+class AutoSubmitForm extends HTMLElement {
+	#internals;
+
+	constructor() {
+		super();
+		this.#internals = this.attachInternals();
+	}
+
+	connectedCallback() {
+		this.addEventListener("change", this.#handleChange);
+		this.#internals.states.add("auto-loading");
+	}
+
+	#handleChange(e) {
+		e.target.closest("form")?.requestSubmit();
+	}
+}
+
+customElements.define("auto-submit-form", AutoSubmitForm);

app/assets/javascripts/items/show.js

@@ -4,7 +4,7 @@ document.addEventListener("change", (e) => {
 
 	try {
 		const mainPickerForm = document.querySelector(
-			"#item-preview species-color-picker form",
+			"#item-preview .species-color-picker form",
 		);
 		const mainSpeciesField = mainPickerForm.querySelector(
 			"[name='preview[species_id]']",

app/assets/javascripts/pose-picker.js

@@ -1,25 +1,13 @@
 /**
- * PosePicker web component
+ * PosePickerPopover web component
  *
- * Progressive enhancement for pose picker forms:
+ * Scrolls the selected style into view when the style picker list becomes
- * - Auto-submits the form when a pose is selected (if JS is enabled)
+ * visible (e.g. tab switch or popover open).
- * - Shows a submit button as fallback (if JS is disabled or slow to load)
- * - Uses Custom Element internals API to communicate state to CSS
  */
 class PosePickerPopover extends HTMLElement {
-	#internals;
 	#styleListObserver;
 
-	constructor() {
-		super();
-		this.#internals = this.attachInternals();
-	}
-
 	connectedCallback() {
-		// Listen for changes to auto-submit the form, then tell CSS about it!
-		this.addEventListener("change", this.#handleChange);
-		this.#internals.states.add("auto-loading");
-
 		// When the style picker list becomes visible (e.g. tab switch or
 		// popover open), scroll the selected style into view.
 		const styleList = this.querySelector(".style-picker-list");
@@ -36,18 +24,9 @@ class PosePickerPopover extends HTMLElement {
 		}
 	}
 
-
 	disconnectedCallback() {
 		this.#styleListObserver?.disconnect();
 	}
-
-	#handleChange(e) {
-		// Only auto-submit if a radio button was changed
-		if (e.target.type === "radio") {
-			e.target.closest("form").requestSubmit();
-		}
-	}
-
 }
 
 customElements.define("pose-picker-popover", PosePickerPopover);

app/assets/javascripts/species-color-picker.js

@@ -1,28 +0,0 @@
-/**
- * SpeciesColorPicker web component
- *
- * Progressive enhancement for species/color picker forms:
- * - Auto-submits the form when species or color changes (if JS is enabled)
- * - Shows a submit button as fallback (if JS is disabled or slow to load)
- * - Uses Custom Element internals API to communicate state to CSS
- */
-class SpeciesColorPicker extends HTMLElement {
-	#internals;
-
-	constructor() {
-		super();
-		this.#internals = this.attachInternals();
-	}
-
-	connectedCallback() {
-		// Listen for changes to auto-submit the form, then tell CSS about it!
-		this.addEventListener("change", this.#handleChange);
-		this.#internals.states.add("auto-loading");
-	}
-
-	#handleChange(e) {
-		this.querySelector("form").requestSubmit();
-	}
-}
-
-customElements.define("species-color-picker", SpeciesColorPicker);

app/assets/stylesheets/items/show.sass

@@ -109,7 +109,7 @@ outfit-viewer
   .error-indicator
     display: block
 
-species-color-picker
+.species-color-picker
   .error-icon
     cursor: help
     margin-right: .25em
@@ -130,7 +130,7 @@ species-color-picker
       animation-delay: .75s
 
   // Once the auto-loading behavior is ready, remove the submit button.
-  &:state(auto-loading)
+  auto-submit-form:state(auto-loading)
     input[type=submit]
       display: none
 
@@ -296,7 +296,7 @@ species-face-picker
         width: 380px
         height: 380px
 
-    species-color-picker
+    .species-color-picker
       grid-area: picker
 
     species-face-picker

app/assets/stylesheets/wardrobe/show.css

@@ -282,7 +282,7 @@ select,
   }
 }
 
-:is(species-color-picker, pose-picker-popover):state(auto-loading) .progressive-submit {
+auto-submit-form:state(auto-loading) .progressive-submit {
   display: none;
 }
 
@@ -425,9 +425,10 @@ body.wardrobe-v2 {
   }
 
   /* Species/color picker */
-  species-color-picker {
+  .species-color-picker {
     display: contents;
 
+    auto-submit-form,
     form {
       display: contents;
     }

app/views/items/show.html.haml

@@ -33,20 +33,21 @@
           Customize more
       = edit_icon
 
-  %species-color-picker
+  .species-color-picker
-    = form_for item_path(@item), method: :get, data: {"is-valid": @preview_error.nil?} do |f|
+    %auto-submit-form
-      - if @preview_error == :pet_type_does_not_exist
+      = form_for item_path(@item), method: :get, data: {"is-valid": @preview_error.nil?} do |f|
-        %span.error-icon{title: "We haven't seen this kind of pet before."} ⚠️
+        - if @preview_error == :pet_type_does_not_exist
-      - elsif @preview_error == :no_item_data
+          %span.error-icon{title: "We haven't seen this kind of pet before."} ⚠️
-        %span.error-icon{title: "We haven't seen this item on this pet before."} ⚠️
+        - elsif @preview_error == :no_item_data
+          %span.error-icon{title: "We haven't seen this item on this pet before."} ⚠️
 
-      = select_tag "preview[color_id]",
+        = select_tag "preview[color_id]",
-        options_from_collection_for_select(Color.alphabetical,
+          options_from_collection_for_select(Color.alphabetical,
-          "id", "human_name", @selected_preview_pet_type.color_id)
+            "id", "human_name", @selected_preview_pet_type.color_id)
-      = select_tag "preview[species_id]",
+        = select_tag "preview[species_id]",
-        options_from_collection_for_select(Species.alphabetical,
+          options_from_collection_for_select(Species.alphabetical,
-          "id", "human_name", @selected_preview_pet_type.species_id)
+            "id", "human_name", @selected_preview_pet_type.species_id)
-      = submit_tag "Go", name: nil
+        = submit_tag "Go", name: nil
 
   %species-face-picker
     %noscript
@@ -138,5 +139,5 @@
 - content_for :javascripts do
   = javascript_include_tag "idiomorph", async: true
   = javascript_include_tag "outfit-viewer", async: true
-  = javascript_include_tag "species-color-picker", async: true
+  = javascript_include_tag "auto-submit-form", async: true
   = javascript_include_tag "items/show", async: true

app/views/wardrobe/appearance/_pose_picker.html.haml

@@ -8,9 +8,11 @@
   - active_tab = @alt_style ? "styles" : "expressions"
   %tab-panel{active: active_tab}
     .tab-content{"data-tab": "expressions", hidden: active_tab != "expressions" ? true : nil}
-      = render "appearance/pose_picker_form"
+      %auto-submit-form
+        = render "appearance/pose_picker_form"
     .tab-content{"data-tab": "styles", hidden: active_tab != "styles" ? true : nil}
-      = render "appearance/style_picker_form"
+      %auto-submit-form
+        = render "appearance/style_picker_form"
     .tab-list
       %button.tab-button{"data-tab": "expressions", type: "button",
         class: ("active" if active_tab == "expressions")}

app/views/wardrobe/appearance/_species_color_picker.html.haml

@@ -1,12 +1,13 @@
-%species-color-picker
+.species-color-picker
-  = form_with url: @wardrobe_path, method: :get do |f|
+  %auto-submit-form
-    = outfit_state_params except: [:color, :species]
+    = form_with url: @wardrobe_path, method: :get do |f|
-    = select_tag :color,
+      = outfit_state_params except: [:color, :species]
-      options_from_collection_for_select(@colors, "id", "human_name",
+      = select_tag :color,
-        @selected_color&.id),
+        options_from_collection_for_select(@colors, "id", "human_name",
-      "aria-label": "Pet color"
+          @selected_color&.id),
-    = select_tag :species,
+        "aria-label": "Pet color"
-      options_from_collection_for_select(@species, "id", "human_name",
+      = select_tag :species,
-        @selected_species&.id),
+        options_from_collection_for_select(@species, "id", "human_name",
-      "aria-label": "Pet species"
+          @selected_species&.id),
-    = submit_tag "Go", name: nil, class: "progressive-submit"
+        "aria-label": "Pet species"
+      = submit_tag "Go", name: nil, class: "progressive-submit"

app/views/wardrobe/show.html.haml

@@ -13,7 +13,7 @@
     = javascript_include_tag "application", async: true
     = javascript_include_tag "idiomorph", async: true
     = javascript_include_tag "outfit-viewer", async: true
-    = javascript_include_tag "species-color-picker", async: true
+    = javascript_include_tag "auto-submit-form", async: true
     = javascript_include_tag "pose-picker", async: true
     = javascript_include_tag "tab-panel", async: true
     = javascript_include_tag "outfit-rename-field", async: true

docs/wardrobe-v2-migration.md

@@ -35,7 +35,7 @@ Code lives in `app/controllers/wardrobe_controller.rb`, `app/views/wardrobe/`, `
 
 **URL as single source of truth**: All outfit state lives in URL params (`species`, `color`, `pose`, `style`, `objects[]`, `q[...]`). Every interaction is a GET request that generates a new URL. No client-side state management. Browser back/forward work naturally.
 
-**Server-side rendering + Web Components**: All HTML is generated server-side. Lightweight web components (`<species-color-picker>`, `<pose-picker-popover>`, `<tab-panel>`, `<outfit-viewer>`) add interactivity without framework overhead.
+**Server-side rendering + Web Components**: All HTML is generated server-side. Lightweight web components (`<auto-submit-form>`, `<pose-picker-popover>`, `<tab-panel>`, `<outfit-viewer>`) add interactivity without framework overhead.
 
 **Progressive enhancement**: Submit buttons appear when JS is slow/disabled. Web components enhance forms with auto-submit on change.