Flush x-model.blur value before form submit handlers run

[joshhanley]

The Scenario

When using x-model.blur on an input inside a form, submitting the form by pressing Enter from that input does not sync the input's value before the submit handler runs. The handler sees stale (empty) data.

<div x-data="{ name: '' }">
    <form @submit.prevent="console.log('name:', name)">
        <input x-model.blur="name" type="text">
        <button type="submit">Submit</button>
    </form>
</div>

The Problem

The browser fires events in this order when Enter is pressed inside a form input:

1. keydown (Enter) on the input
2. submit on the form
3. blur on the input (only after submit)

Since blur fires after submit, Alpine's x-model.blur listener never syncs the value before the @submit handler executes. The .change and .enter modifiers are not affected — the browser fires change and keydown before submit.

The Solution

When x-model.blur is used on an input inside a form, a pending model update callback is registered on the form element (el.form._x_pendingModelUpdates). The on() event utility then flushes any pending model updates before running submit handlers.

• x-model.js: When .blur is present and the input is inside a form, registers a sync callback on the form element and cleans it up when the directive is removed
• on.js: When setting up any submit event handler, wraps it to flush _x_pendingModelUpdates on the form before the handler executes

[jeffchown]

Nice! Makes sense to address it Alpine. Thanks again, @joshhanley !