Dirty States

Dirty States are helpful for providing feedback that content has changed and is not yet in-sync with the back-end Wire component.

For input that uses wire:model, or wire:model.lazy, you may want to display that a field is 'dirty' until WireDrupal has fully updated.

Elements with the wire:dirty directive will watch for differences between the front-end value, and the last returned Wire data value.

Adding the class modifier allows you to add a class to the element when dirty.

<input wire:dirty.class="text-red" wire:model.lazy="node.title">

With above, when a user modifies the input value, the element will receive the text-red class. The class will be removed again if the input value returns to its original state, or if the Wire component updates.

You can also perform the reverse, and remove classes by adding the .remove modifier, similar to how wire:loading works.

<input wire:dirty.class.remove="text-red" class="text-red" wire:model.lazy="node.title">

The text-red class will be removed from the input while dirty.

The default behaviors of the wire:dirty directive without modifiers is that the element will be hidden until dirty. This can create a paradox if used on the input itself, but like loading states, the dirty directive can be used to toggle the appearance of other elements using wire:target

<span wire:dirty wire:target="node.title">Updating...</span>

<input wire:model.lazy="node.title">

With above, the span will be hidden by default, and only visible when the input element is dirty.

The class and attribute modifiers can be used in the same way for referenced elements

<label wire:dirty.class="text-red" wire:target="node.title">Title</label>

<input wire:model.lazy="node.title">

With above, when the input is dirty, the label text will receive the text-red class.