fix(x-model): flush x-model.blur value before form submit handlers run (#4729)

When using `x-model.blur` on an input inside a form, submitting via
Enter key does not sync the value before the submit handler executes.
The browser fires events in order: keydown → submit → blur, so the
blur listener never runs before the submit handler reads the value.

Register pending model update callbacks on the form element and flush
them before any submit handler runs via the `on()` utility.

Author: joshhanley

packages/alpinejs/src/directives/x-model.js

@@ -77,6 +77,19 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
 
         if (hasBlurModifier) {
             listeners.push(on(el, 'blur', modifiers, syncValue))
+
+            // The browser fires "submit" before "blur", so if this input
+            // is inside a form, the model value would be stale when the
+            // submit handler runs. Register a pending update on the form
+            // so it can be flushed before submit handlers execute.
+            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))
+            }
         }
 
         if (hasEnterModifier) {

packages/alpinejs/src/utils/on.js

@@ -66,6 +66,18 @@ export default function on (el, event, modifiers, callback) {
 
     if (modifiers.includes('self')) handler = wrapHandler(handler, (next, e) => { e.target === el && next(e) })
 
+    // Flush any pending model updates before submit handlers run
+    // (e.g. x-model.blur inputs that haven't synced yet).
+    if (event === 'submit') {
+        handler = wrapHandler(handler, (next, e) => {
+            if (e.target._x_pendingModelUpdates) {
+                e.target._x_pendingModelUpdates.forEach(fn => fn())
+            }
+
+            next(e)
+        })
+    }
+
     // Handle :keydown and :keyup listeners.
     // Handle :click and :auxclick listeners.
     if (isKeyEvent(event) || isClickEvent(event)) {

tests/cypress/integration/directives/x-model.spec.js

@@ -642,3 +642,21 @@ test('x-model.enter.blur updates on enter OR blur (enter should work)',
     }
 )
 
+test('x-model.blur syncs value before form submit handler runs',
+    html`
+    <div x-data="{ value: '', capturedValue: '' }">
+        <form @submit.prevent="capturedValue = value">
+            <input x-model.blur="value" type="text">
+        </form>
+        <span id="captured" x-text="capturedValue"></span>
+    </div>
+    `,
+    ({ get }) => {
+        get('input').type('hello')
+        get('#captured').should(haveText(''))
+        // Submit the form without blurring the input first
+        get('form').then(([form]) => form.requestSubmit())
+        get('#captured').should(haveText('hello'))
+    }
+)
+