impress/app/assets/javascripts/pose-picker.js

/**
 * PosePicker web component
 *
 * Progressive enhancement for pose picker forms:
 * - Auto-submits the form when a pose is selected (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 PosePickerPopover 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) {
		// Only auto-submit if a radio button was changed
		if (e.target.type === "radio") {
			this.querySelector("form").requestSubmit();
		}
	}
}

customElements.define("pose-picker-popover", PosePickerPopover);