x-model.blur cleanup crashes when element is removed from DOM (regression from #4729)

[kenlas]

Description

PR #4729 (merged Feb 2, 2026) introduced a cleanup callback in the x-model directive that references el.form._x_pendingModelUpdates. When an input with x-model.blur (or Livewire's wire:model.blur) is removed from the DOM — for example via x-if or Livewire's @if morphing — the element's .form property becomes null because it's no longer attached to a <form>. The cleanup callback then throws:

Uncaught TypeError: Cannot read properties of null (reading '_x_pendingModelUpdates')

This error crashes the entire DOM morph process, which also prevents x-model / wire:model bindings on other elements from being initialized during the same render cycle.

Steps to reproduce

1. Place an <input x-model.blur="value"> inside an x-if (or Livewire @if) block within a <form>
2. Trigger a re-render that removes the element from the DOM (e.g., toggle the x-if condition)
3. Observe the TypeError in the console

Minimal reproduction with Livewire (same applies with pure Alpine x-if):

<form wire:submit="save">
    <select wire:model.live="type">
        <option value="a">A</option>
        <option value="b">B</option>
    </select>

    @if ($type === 'a')
        <input wire:model.blur="field_a" />
    @endif

    <button type="submit">Save</button>
</form>

When the user switches from type "a" to "b", the <input wire:model.blur> is removed during the Livewire morph. The cleanup callback throws because el.form is null.

Root cause

In packages/alpinejs/src/directives/x-model.js, the code added by #4729:

if (el.form) {
    let syncCallback = () => syncValue({ target: el });
    if (!el.form._x_pendingModelUpdates)
        el.form._x_pendingModelUpdates = [];
    el.form._x_pendingModelUpdates.push(syncCallback);
    cleanup(() => el.form._x_pendingModelUpdates.splice(
        el.form._x_pendingModelUpdates.indexOf(syncCallback), 1
    ));
}

The if (el.form) check correctly guards at registration time, but the cleanup() callback executes later when the element is being torn down. By that point, the element has been detached from its parent form, so el.form returns null.

Suggested fix

Capture the form reference at registration time:

if (el.form) {
    let form = el.form;
    let syncCallback = () => syncValue({ target: el });
    if (!form._x_pendingModelUpdates)
        form._x_pendingModelUpdates = [];
    form._x_pendingModelUpdates.push(syncCallback);
    cleanup(() => form._x_pendingModelUpdates.splice(
        form._x_pendingModelUpdates.indexOf(syncCallback), 1
    ));
}

Versions

• Alpine.js: v3.15.8
• Livewire: v4.1.3 (bundles Alpine)
• Browsers: all (DOM spec behavior — .form returns null for detached elements)

[RikoDEV]

I confirm that this issue exists. After applying the @kenlas DOM fix, the form is updated correctly without any errors.

[nat986]

This issue is also affecting a production application I support.

[patriciosebastian]

Confirmed. I'm also running into this exact issue.

[arjankapteijn]

Confirm. Same issue here

[joshhanley]

Apologies, I didn’t see this issue. This has been fixed in the latest release. Please upgrade to v3.15.9