Installer and Test

Author: karim-semmoud

assets/components/signature-pad.ts

@@ -40,7 +40,9 @@ export class SignaturePad extends Component<Props, Api> {
       const hiddenInput = this.el.querySelector<HTMLInputElement>(
         '[data-scope="signature-pad"][data-part="hidden-input"]'
       );
-      if (hiddenInput) hiddenInput.value = "";
+      if (hiddenInput && hiddenInput.value !== "") {
+        hiddenInput.value = "";
+      }
       return;
     }
 

assets/hooks/color-picker.ts

@@ -17,6 +17,20 @@ type ColorPickerHookState = {
   onSetValue?: (event: Event) => void;
 };
 
+function syncColorHiddenAndNotify(el: HTMLElement, valueAsString: string | undefined) {
+  if (valueAsString === undefined) {
+    return;
+  }
+  const hidden = el.querySelector<HTMLInputElement>(
+    '[data-scope="color-picker"][data-part="hidden-input"]'
+  );
+  if (hidden) {
+    hidden.value = valueAsString;
+    hidden.dispatchEvent(new Event("input", { bubbles: true }));
+    hidden.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+}
+
 function readValueProps(el: HTMLElement): Pick<Props, "defaultValue"> {
   const defaultVal = getString(el, "defaultValue");
   return { defaultValue: defaultVal ? parse(defaultVal) : undefined };
@@ -44,6 +58,7 @@ const ColorPickerHook: Hook<object & ColorPickerHookState, HTMLElement> = {
       dir: getDir(el),
       positioning: readPositioningOptions(el),
       onValueChange: (details: ValueChangeDetails) => {
+        syncColorHiddenAndNotify(el, details.valueAsString);
         notifyChange({
           el,
           canPushServer: canPush(),
@@ -57,6 +72,7 @@ const ColorPickerHook: Hook<object & ColorPickerHookState, HTMLElement> = {
         });
       },
       onValueChangeEnd: (details: ValueChangeDetails) => {
+        syncColorHiddenAndNotify(el, details.valueAsString);
         notifyChange({
           el,
           canPushServer: canPush(),

assets/hooks/combobox.ts

@@ -99,6 +99,7 @@ function buildComboboxProps(
           const list = details.value.map((v) => String(v));
           hidden.value =
             list.length === 0 ? "" : getBoolean(el, "multiple") ? list.join(",") : (list[0] ?? "");
+          hidden.dispatchEvent(new Event("input", { bubbles: true }));
           hidden.dispatchEvent(new Event("change", { bubbles: true }));
         }
       }

assets/hooks/date-picker.ts

@@ -82,6 +82,7 @@ const DatePickerHook: Hook<object & DatePickerHookState, HTMLElement> = {
       placeholder: getString(el, "placeholder"),
       minView: getString<"day" | "month" | "year">(el, "minView"),
       maxView: getString<"day" | "month" | "year">(el, "maxView"),
+      defaultOpen: false,
       inline: getBoolean(el, "inline"),
       positioning: readPositioningOptions(el),
       ...resolveZagDatePickerTranslations(el),

assets/hooks/number-input.ts

@@ -36,6 +36,8 @@ const NumberInputHook: Hook<object & NumberInputHookState, HTMLElement> = {
           );
           if (valueInput) {
             valueInput.value = details.value ?? "";
+            valueInput.dispatchEvent(new Event("input", { bubbles: true }));
+            valueInput.dispatchEvent(new Event("change", { bubbles: true }));
           }
         }
         notifyChange({

assets/hooks/radio-group.ts

@@ -34,6 +34,13 @@ const RadioGroupHook: Hook<object & RadioGroupHookState, HTMLElement> = {
       dir: getDir(el),
       orientation: getString<"horizontal" | "vertical">(el, "orientation"),
       onValueChange: (details: ValueChangeDetails) => {
+        const checked = el.querySelector<HTMLInputElement>(
+          '[data-scope="radio-group"][data-part="item-hidden-input"]:checked'
+        );
+        if (checked) {
+          checked.dispatchEvent(new Event("input", { bubbles: true }));
+          checked.dispatchEvent(new Event("change", { bubbles: true }));
+        }
         notifyChange({
           el,
           canPushServer: canPush(),

assets/hooks/select.ts

@@ -97,6 +97,7 @@ const SelectHook: Hook<object & SelectHookState, HTMLElement> = {
               : details.value.length === 1
                 ? String(details.value[0])
                 : details.value.map(String).join(",");
+          valueInput.dispatchEvent(new Event("input", { bubbles: true }));
           valueInput.dispatchEvent(new Event("change", { bubbles: true }));
         }
 

assets/hooks/signature-pad.ts

@@ -6,6 +6,8 @@ import type { Props } from "@zag-js/signature-pad";
 import { getBoolean, getNumber, getString } from "../lib/util";
 import { idMatches, readPayloadId } from "../lib/respond-to";
 
+const PHX_HAS_FOCUSED = "phx-has-focused";
+
 function parsePathsFromDataset(el: HTMLElement, key: "defaultPaths" | "paths"): string[] {
   const raw = el.dataset[key];
   if (!raw) return [];
@@ -15,6 +17,12 @@ function parsePathsFromDataset(el: HTMLElement, key: "defaultPaths" | "paths"):
     .filter(Boolean);
 }
 
+function reapplyLiveViewValueInputUsage(input: HTMLInputElement) {
+  const p = input as HTMLInputElement & { phxPrivate?: Record<string, boolean> };
+  if (!p.phxPrivate) p.phxPrivate = {};
+  p.phxPrivate[PHX_HAS_FOCUSED] = true;
+}
+
 function buildDrawingOptions(el: HTMLElement): NonNullable<Props["drawing"]> {
   const o: Record<string, unknown> = {
     fill: getString(el, "drawingFill"),
@@ -29,16 +37,24 @@ function buildDrawingOptions(el: HTMLElement): NonNullable<Props["drawing"]> {
   return o as NonNullable<Props["drawing"]>;
 }
 
-function queueFormBubblingInputForPhoenix(el: HTMLElement, getValue: () => string): void {
+function queueFormBubblingInputForPhoenix(
+  el: HTMLElement,
+  getValue: () => string,
+  opts: { onPadTouched: () => void }
+): void {
   queueMicrotask(() => {
     const input = el.querySelector<HTMLInputElement>(
       '[data-scope="signature-pad"][data-part="hidden-input"]'
     );
-    if (!input) return;
+    if (!input) {
+      return;
+    }
     const v = getValue();
     if (String(input.value) !== String(v)) {
       input.value = v;
     }
+    opts.onPadTouched();
+    reapplyLiveViewValueInputUsage(input);
     input.dispatchEvent(new Event("input", { bubbles: true }));
     input.dispatchEvent(new Event("change", { bubbles: true }));
   });
@@ -48,14 +64,34 @@ type SignaturePadHookState = {
   signaturePad?: SignaturePad;
   handlers?: Array<CallbackRef>;
   onClear?: (event: Event) => void;
+  padTouched: boolean;
 };
 
 const SignaturePadHook: Hook<object & SignaturePadHookState, HTMLElement> = {
   mounted(this: object & HookInterface<HTMLElement> & SignaturePadHookState) {
     const el = this.el;
+    const hook = this as object & SignaturePadHookState;
     const pushEvent = this.pushEvent.bind(this);
+    hook.padTouched = false;
+    const markTouched = () => {
+      hook.padTouched = true;
+    };
 
     const defaultPaths = parsePathsFromDataset(el, "defaultPaths");
+    {
+      const input = el.querySelector<HTMLInputElement>(
+        '[data-scope="signature-pad"][data-part="hidden-input"]'
+      );
+      if (String(input?.value ?? "") !== "" || defaultPaths.length > 0) {
+        hook.padTouched = true;
+        queueMicrotask(() => {
+          const i = el.querySelector<HTMLInputElement>(
+            '[data-scope="signature-pad"][data-part="hidden-input"]'
+          );
+          if (i) reapplyLiveViewValueInputUsage(i);
+        });
+      }
+    }
 
     const signaturePad = new SignaturePad(el, {
       id: el.id,
@@ -65,8 +101,10 @@ const SignaturePadHook: Hook<object & SignaturePadHookState, HTMLElement> = {
       onDrawEnd: (details) => {
         signaturePad.setPaths(details.paths);
 
-        queueFormBubblingInputForPhoenix(el, () =>
-          details.paths.length > 0 ? details.paths.join("\n") : ""
+        queueFormBubblingInputForPhoenix(
+          el,
+          () => (details.paths.length > 0 ? details.paths.join("\n") : ""),
+          { onPadTouched: markTouched }
         );
 
         details.getDataUrl("image/png").then((url) => {
@@ -99,12 +137,11 @@ const SignaturePadHook: Hook<object & SignaturePadHookState, HTMLElement> = {
     } as Props);
     signaturePad.init();
     this.signaturePad = signaturePad;
-
     this.onClear = (event: Event) => {
       const { id: targetId } = (event as CustomEvent<{ id: string }>).detail;
       if (targetId && targetId !== el.id) return;
       signaturePad.api.clear();
-      queueFormBubblingInputForPhoenix(el, () => "");
+      queueFormBubblingInputForPhoenix(el, () => "", { onPadTouched: markTouched });
     };
     el.addEventListener("corex:signature-pad:clear", this.onClear);
 
@@ -114,14 +151,13 @@ const SignaturePadHook: Hook<object & SignaturePadHookState, HTMLElement> = {
       this.handleEvent("signature_pad_clear", (payload: unknown) => {
         if (!idMatches(el.id, readPayloadId(payload))) return;
         signaturePad.api.clear();
-        queueFormBubblingInputForPhoenix(el, () => "");
+        queueFormBubblingInputForPhoenix(el, () => "", { onPadTouched: markTouched });
       })
     );
   },
 
   updated(this: object & HookInterface<HTMLElement> & SignaturePadHookState) {
     const el = this.el;
-    const defaultPaths = parsePathsFromDataset(el, "defaultPaths");
     const name = getString(el, "name");
 
     if (name) {
@@ -131,9 +167,20 @@ const SignaturePadHook: Hook<object & SignaturePadHookState, HTMLElement> = {
     this.signaturePad?.updateProps({
       id: el.id,
       name: name,
-      ...(defaultPaths.length > 0 ? { defaultPaths } : {}),
       drawing: buildDrawingOptions(el),
     } as Partial<Props>);
+
+    if (!this.padTouched) {
+      return;
+    }
+    queueMicrotask(() => {
+      const input = this.el.querySelector<HTMLInputElement>(
+        '[data-scope="signature-pad"][data-part="hidden-input"]'
+      );
+      if (input) {
+        reapplyLiveViewValueInputUsage(input);
+      }
+    });
   },
 
   destroyed(this: object & HookInterface<HTMLElement> & SignaturePadHookState) {

config/config.exs

@@ -2,7 +2,8 @@ import Config
 
 config :logger, :console,
   colors: [enabled: false],
-  format: "\n$time $metadata[$level] $message\n"
+  format: "\n$time $metadata[$level] $message\n",
+  metadata: :all
 
 config :phoenix,
   json_library: Jason,

e2e/AGENTS.md

@@ -50,9 +50,6 @@ custom classes must fully style the input
 - Ensure **clean typography, spacing, and layout balance** for a refined, premium look
 - Focus on **delightful details** like hover effects, loading states, and smooth page transitions
 
-
-<!-- usage-rules-start -->
-
 <!-- phoenix:elixir-start -->
 ## Elixir guidelines
 
@@ -451,6 +448,4 @@ And **never** do this:
 
 - You are FORBIDDEN from accessing the changeset in the template as it will cause errors
 - **Never** use `<.form let={f} ...>` in the template, instead **always use `<.form for={@form} ...>`**, then drive all form references from the form assign as in `@form[:field]`. The UI should **always** be driven by a `to_form/2` assigned in the LiveView module that is derived from a changeset
-<!-- phoenix:liveview-end -->
-
-<!-- usage-rules-end -->
+<!-- phoenix:liveview-end -->