phoenix_duskmoon 9.16.14 → 9.16.15

package/CHANGELOG.md

@@ -4,6 +4,10 @@
 
 - Public React Chat hook factory, custom composer and renderer integration, and
   application metadata, runtime and admission state across snapshots and events.
+- Opt-in browser constraint validation for classic React forms with
+  `novalidate={false}`; schema forms retain JSON Schema validation.
+- Independent classic React form layout through `form_class`, preserving outer
+  wrapper `class`; document the upstream schema-form styling limitation.
 - Native Core components: carousel, countdown, diff, keyboard keys, radial progress,
   floating actions, swap, filter group, hero, indicator, join, mask, sidebar layout,
   stack and megamenu, with Storybook examples.
@@ -32,6 +36,13 @@
 
 ### Fixed
 
+- Forward React form field attributes to their interactive controls and preserve
+  application-disabled fields when the LiveView connection recovers.
+- Preserve selected-value arrays for native checkbox groups named with `[]`,
+  including nested paths, empty selections and per-checkbox reset state.
+- Read current native controls before React form submission, including
+  programmatically changed hidden inputs, and delegate events for replaced or
+  newly added controls while preserving React-owned values.
 - Resolve production chunk imports by their importing module, preventing identical
   relative paths in unrelated packages from becoming missing browser assets.
 - Preserve lazy custom-element registration and resolve preload URLs relative to

package/assets/js/react_form/component.js

@@ -10,30 +10,41 @@ const h = React.createElement;
 export function ReactField({ config, value, errors, disabled, onChange }) {
   const errorId = useId();
   const label = config.label || (Array.isArray(config.name) ? config.name.join(".") : config.name);
-  const common = { disabled, "aria-label": label, "aria-invalid": errors?.length ? "true" : undefined, "aria-describedby": errors?.length ? errorId : undefined };
+  const common = { disabled: Boolean(disabled || config.disabled), "aria-label": label, "aria-invalid": errors?.length ? "true" : undefined, "aria-describedby": errors?.length ? errorId : undefined };
+  const textAttributes = { placeholder: config.placeholder ?? undefined, autoComplete: config.autocomplete ?? undefined, required: config.required, readOnly: config.readonly };
   let control;
 
   switch (config.type) {
     case "checkbox":
-      control = h(Checkbox, { ...common, checked: Boolean(value), onChange: (event) => onChange(event.target.checked) });
+      control = h(Checkbox, { ...common, required: config.required, checked: Boolean(value), onChange: (event) => onChange(event.target.checked) });
       break;
     case "number":
-      control = h(InputNumber, { ...common, value: value ?? null, onChange });
+      // TODO(upstream): duskmoon-dev/duskmoon-react#82
+      // WORKAROUND(upstream): duskmoon-dev/duskmoon-react#82 — readOnly does not guard upstream stepping.
+      control = h(InputNumber, { ...common, ...textAttributes, min: config.min ?? undefined, max: config.max ?? undefined, step: config.step ?? undefined,
+        controls: config.readonly ? false : undefined, keyboard: config.readonly ? false : undefined, value: value ?? null, onChange });
       break;
     case "select":
     case "multiselect":
-      control = h(Select, { ...common, value: value ?? undefined, mode: config.type === "multiselect" ? "multiple" : undefined,
+      // TODO(upstream): duskmoon-dev/duskmoon-react#83
+      // WORKAROUND(upstream): duskmoon-dev/duskmoon-react#83 — only the mounted trigger can receive required ARIA in 0.5.0.
+      control = h(Select, { ...common, placeholder: config.placeholder ?? undefined, ref: (container) => {
+        const trigger = container?.querySelector('button[aria-haspopup="listbox"]');
+        if (config.required) trigger?.setAttribute("aria-required", "true");
+        else trigger?.removeAttribute("aria-required");
+      }, value: value ?? undefined, mode: config.type === "multiselect" ? "multiple" : undefined,
         options: config.options || [], showSearch: true, allowClear: true, onChange: (next) => onChange(next ?? null) });
       break;
     case "textarea":
-      control = h("textarea", { ...common, className: "textarea", value: value ?? "", onChange: (event) => onChange(event.target.value) });
+      control = h("textarea", { ...common, ...textAttributes, rows: config.rows ?? undefined, className: "textarea", value: value ?? "", onChange: (event) => onChange(event.target.value) });
       break;
     default:
-      control = h(Input, { ...common, type: config.type, value: value ?? "", onChange: (event) => onChange(event.target.value) });
+      control = h(Input, { ...common, ...textAttributes, type: config.type, value: value ?? "", onChange: (event) => onChange(event.target.value) });
   }
 
   return h(Form.Item, {
     label,
+    required: config.required,
     className: errors?.length ? "form-item-error" : undefined,
     help: errors?.length ? h(Form.ErrorList, { id: errorId, errors, role: "alert" }) : undefined,
   }, control);

package/assets/js/react_form/index.js

@@ -3,7 +3,7 @@ import { createRoot } from "react-dom/client";
 import { ReactField } from "./component.js";
 import { compileForm } from "@duskmoon-dev/components/json-schema-form";
 import { ReactSchemaForm, changedPath, schemaErrors } from "./schema.js";
-import { collectValues, fieldKey, getAt, pathOf, setAt } from "./values.js";
+import { collectValues, fieldKey, getAt, nativeValue, pathOf, setAt, setNativeValue } from "./values.js";
 function parseJSON(value, fallback = {}) { try { return JSON.parse(value); } catch { return fallback; } }
 function flattenErrors(errors, prefix = [], result = {}) {
   Object.entries(errors || {}).forEach(([key, value]) => {
@@ -26,10 +26,10 @@ export const DuskmoonReactForm = {
   },
   mountForm() {
     this.form = this.el.querySelector("[data-dm-react-form]");
-    const nativeValues = collectValues([...this.form.querySelectorAll("[name]")]);
+    this.fields = [...this.el.querySelectorAll("[data-dm-react-field]")];
+    const nativeValues = collectValues(this.nativeControls());
     this.values = { ...nativeValues, ...parseJSON(this.el.dataset.initialValues) };
     this.initialValues = structuredClone(this.values);
-    this.fields = [...this.el.querySelectorAll("[data-dm-react-field]")];
     const fieldKeys = this.fields.map((element) => fieldKey(parseJSON(element.dataset.dmReactField).name));
     if (new Set(fieldKeys).size !== fieldKeys.length) throw new Error("React form field names must be unique");
     this.mountFields(); this.bindNative(); this.bindForm();
@@ -42,6 +42,7 @@ export const DuskmoonReactForm = {
     this.renderSchema();
   },
   renderSchema() {
+    // TODO(upstream): duskmoon-dev/duskmoon-react#85 - JsonSchemaForm has no native form class prop.
     this.schemaRoot.render(React.createElement(ReactSchemaForm, {
       key: this.schemaRevision, compiled: this.compiledSchema, value: this.values,
       defaultValue: this.initialValues, errors: this.errors, disabled: this.disconnectedState,
@@ -68,18 +69,23 @@ export const DuskmoonReactForm = {
       onChange: (value) => this.change(config.name, value),
     }));
   },
-  bindNative() {
-    this.native = [...this.form.querySelectorAll("[name]")].filter((element) => !element.closest("[data-dm-react-field]"));
-    this.native.forEach((element) => {
-      const handler = () => this.change(element.name, this.nativeValue(element));
-      element.addEventListener("input", handler); element.addEventListener("change", handler); element.__dmReactHandler = handler;
+  nativeControls() {
+    const managedPaths = this.fields.map((element) => pathOf(parseJSON(element.dataset.dmReactField).name).map(String));
+    return [...this.form.querySelectorAll("input[name], select[name], textarea[name]")].filter((element) => {
+      if (element.closest("[data-dm-react-field]")) return false;
+      const path = pathOf(element.name).map(String);
+      return !managedPaths.some((managed) => managed.slice(0, Math.min(path.length, managed.length)).every((key, index) => key === path[index]));
     });
   },
+  bindNative() {
+    this.nativeHandler = (event) => {
+      const controls = this.nativeControls(); const element = event.target;
+      if (controls.includes(element)) this.change(element.name, nativeValue(element, controls));
+    };
+    this.form.addEventListener("input", this.nativeHandler); this.form.addEventListener("change", this.nativeHandler);
+  },
   nativeValue(element) {
-    if (element.type === "checkbox") return element.checked;
-    if (element.type === "number") return element.value === "" ? null : Number(element.value);
-    if (element.multiple) return [...element.selectedOptions].map((option) => option.value);
-    return element.value;
+    return nativeValue(element, this.nativeControls());
   },
   bindForm() {
     this.submitHandler = (event) => { event.preventDefault(); this.submit(); };
@@ -94,7 +100,15 @@ export const DuskmoonReactForm = {
     const event = this.el.getAttribute("phx-change"); if (!event || this.disconnectedState) return;
     clearTimeout(this.changeTimer); this.changeTimer = setTimeout(() => this.send(event, name), Number(this.el.getAttribute("phx-debounce") || 0));
   },
-  submit() { clearTimeout(this.changeTimer); const event = this.el.getAttribute("phx-submit"); if (event && !this.disconnectedState) this.send(event); },
+  submit() {
+    clearTimeout(this.changeTimer); const event = this.el.getAttribute("phx-submit"); if (!event || this.disconnectedState) return;
+    if (this.form) {
+      if (this.form.noValidate === false && !this.form.reportValidity()) return;
+      const controls = this.nativeControls();
+      controls.forEach((element) => { this.values = setAt(this.values, element.name, nativeValue(element, controls)); });
+    }
+    this.send(event);
+  },
   send(event, changed) {
     const revision = ++this.revision; const values = this.values;
     const payload = { id: this.el.id, values, revision, ...(changed ? { changed: pathOf(changed) } : {}) };
@@ -109,9 +123,9 @@ export const DuskmoonReactForm = {
     clearTimeout(this.changeTimer);
     this.values = structuredClone(values); this.errors = {}; this.revision++;
     if (this.schemaRoot) { this.schemaRevision++; this.renderAll(); return; }
-    this.native.forEach((element) => { if (element.type === "checkbox") element.checked = Boolean(getAt(this.values, element.name)); else element.value = getAt(this.values, element.name) ?? ""; }); this.renderAll();
+    this.nativeControls().forEach((element) => setNativeValue(element, getAt(this.values, element.name))); this.renderAll();
   },
   disconnected() { clearTimeout(this.changeTimer); this.disconnectedState = true; this.renderAll(); },
   reconnected() { this.disconnectedState = false; this.renderAll(); },
-  destroyed() { this.destroyedState = true; clearTimeout(this.changeTimer); this.schemaRoot?.unmount(); this.form?.removeEventListener("submit", this.submitHandler); this.form?.removeEventListener("reset", this.resetHandler); this.native?.forEach((element) => { element.removeEventListener("input", element.__dmReactHandler); element.removeEventListener("change", element.__dmReactHandler); }); this.roots.forEach(({ root }) => root.unmount()); },
+  destroyed() { this.destroyedState = true; clearTimeout(this.changeTimer); this.schemaRoot?.unmount(); this.form?.removeEventListener("submit", this.submitHandler); this.form?.removeEventListener("reset", this.resetHandler); this.form?.removeEventListener("input", this.nativeHandler); this.form?.removeEventListener("change", this.nativeHandler); this.roots.forEach(({ root }) => root.unmount()); },
 };

package/assets/js/react_form/values.js

@@ -17,13 +17,27 @@ export function setAt(values, name, value) {
   return result;
 }
 
+function isCheckboxGroup(element) {
+  return element.type === "checkbox" && element.name.endsWith("[]");
+}
+
+export function nativeValue(element, elements = [element]) {
+  if (isCheckboxGroup(element)) {
+    return elements.filter((control) => control.type === "checkbox" && control.name === element.name && control.checked)
+      .map((control) => control.value);
+  }
+  if (element.type === "checkbox") return Boolean(element.checked);
+  if (element.type === "number") return element.value === "" ? null : Number(element.value);
+  if (element.multiple) return [...element.selectedOptions].map((option) => option.value);
+  return element.value;
+}
+
+export function setNativeValue(element, value) {
+  if (element.type === "checkbox") {
+    element.checked = isCheckboxGroup(element) ? Array.isArray(value) && value.includes(element.value) : Boolean(value);
+  } else element.value = value ?? "";
+}
+
 export function collectValues(elements) {
-  return elements.reduce((values, element) => {
-    let value;
-    if (element.type === "checkbox") value = Boolean(element.checked);
-    else if (element.type === "number") value = element.value === "" ? null : Number(element.value);
-    else if (element.multiple) value = [...element.selectedOptions].map((option) => option.value);
-    else value = element.value;
-    return setAt(values, element.name, value);
-  }, {});
+  return elements.reduce((values, element) => setAt(values, element.name, nativeValue(element, elements)), {});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_duskmoon",
-  "version": "9.16.14",
+  "version": "9.16.15",
   "type": "module",
   "exports": {
     ".": "./priv/static/assets/js/phoenix_duskmoon.js",