Skip to content

Conversation

@calebporzio
Copy link
Collaborator

Overview

By default, x-model syncs on every keystroke (input event). The existing .lazy modifier delays sync until change, but there's no way to sync on blur or Enter keypress.

This PR adds three new event modifiers that give you fine-grained control over when x-model syncs:

Modifier Syncs when...
.change Input loses focus after value changed (alias for .lazy)
.blur Input loses focus
.enter User presses Enter

Combining modifiers

These modifiers can be combined to sync on multiple events:

<!-- Sync on blur OR Enter -->
<input x-model.blur.enter="search">

<!-- Sync on change, blur, OR Enter -->
<input x-model.change.blur.enter="message">

Use cases

  • Search fields: Use .enter to only search when user presses Enter
  • Form validation: Use .blur to validate when user leaves a field
  • Performance: Use .change to reduce reactivity on large forms

Notes

  • .enter does NOT prevent default behavior (forms still submit)
  • .lazy remains supported as an alias for .change
  • Default x-model behavior is unchanged

@calebporzio calebporzio merged commit adc8e9b into main Jan 26, 2026
2 checks passed
@calebporzio calebporzio deleted the add-new-x-model-modifiers branch January 26, 2026 12:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants