In Livewire 4, how do the wire:model modifiers .blur, .change, .enter and .deep behave, and why does .live.blur differ from .blur.live?

## Two clocks in one binding A `wire:model` binding has two moments that can be controlled separately: 1. **Client-side sync**: when the input's value is written into the component's JavaScript state (`$wire.title`), which is what `wire:dirty`, Alpine expressions and `$wire` reads see. 2. **Network sync**: when that state is sent to the server in a request. In Livewire 3, typing always updated client-side state immediately, and modifiers like `.blur` only chose when the request went out. **Livewire 4** (the timing change arrived in 4.1) lets modifiers control **both** clocks, split at `.live`. ## The rule: split at .live - Modifiers **before** `.live`, or on a binding without `.live`, control **client-side sync**. - Modifiers **after** `.live` control **when the request is sent**. | Binding | Client state updates | Request sent | |---|---|---| | `wire:model.blur` | On blur | Never by itself, rides on the next request | | `wire:model.blur.live` | On blur | On blur | | `wire:model.live.blur` | On every input | On blur (the Livewire 3 `.blur` behaviour) | | `wire:model.change` | On change | Never by itself | | `wire:model.live.change` | On every input | On change | | `wire:model.enter` | On Enter | Never by itself | | `wire:model.enter.live` | On Enter | On Enter | | `wire:model.lazy` | On change | On change (kept for v3 compatibility) | With `.live.blur`, the blur request is skipped when nothing changed since the last server sync. ## What each modifier is for - **`.blur`**: text fields where you want validation or saving only when the user leaves the field. A **price** input in a product search is a typical case: no request per digit. - **`.change`**: selects, where the change event fires once per choice. - **`.enter`**: search boxes that should apply only when the user presses Enter. - **`.deep`**: see below. ## Upgrading from Livewire 3 The upgrade guide's mapping: 1. `wire:model.blur` in v3 becomes `wire:model.live.blur` in v4. 2. `wire:model.change` in v3 becomes `wire:model.live.change` in v4. 3. `wire:model.lazy` keeps working unchanged. Leaving v3 `.blur` bindings untouched after an upgrade silently changes behaviour: the request that used to fire on blur no longer happens, so real-time validation on blur stops until the next action. ## .deep and event propagation In Livewire 4, `wire:model` listens only to input and change events that **originate on its own element**, as if Alpine's `.self` were applied. That prevents a `wire:model="open"` on a modal container from reacting when an input inside the modal is cleared. When you genuinely want a container to collect events from its descendants, use `.deep`: ```html <div wire:model.deep="price"> <input type="range" min="0" max="500"> </div> ``` In Livewire 3 the bubbling behaviour was the default; Livewire 4 made it opt-in. ## Seeing the difference in practice The two clocks matter whenever something on the page reads client-side state before the server does: - A character counter written with Alpine reading `$wire.title` updates per keystroke with `.live.blur`, but only after blur with `.blur.live`. - `wire:dirty` compares client-side state with the server's. With `.live.blur`, the field turns dirty as soon as the user types and clean after the blur request; with `.blur` alone it turns dirty on blur and stays dirty until the next request. - Form submits still carry whatever client-side state exists at that moment, so a field bound with `.enter` that the user never confirmed with Enter is submitted with its **old** value. ## Combining with debounce `.debounce` and `.throttle` belong after `.live` as well: `wire:model.live.debounce.400ms="search"`. They have no effect on client-side sync.