Filament•2d ago

Why wire:dirty not working with <x-filament::> components ?

Hi guys ! I'm writing some custom Livewire components and I'm using some Filament blade components inside of them to keep the UI consistent. I'm trying to use wire:dirty on a Filament button but it doesn't work. It works on a basic HTML button, do you know why ?

<x-filament::button
    wire:click="validateTimeslots"
    wire:dirty.remove
 >
    {{ __('Confirm') }}
</x-filament::button>

<button wire:dirty.remove>
    Testing
</button>

<x-filament::button
    wire:click="validateTimeslots"
    wire:dirty.remove
 >
    {{ __('Confirm') }}
</x-filament::button>

<button wire:dirty.remove>
    Testing
</button>

1 Reply

BenjaminOP•2d ago

The only turn-around I found is this :

<div class="flex justify-center" wire:dirty.class="hidden">
    <x-filament::button wire:click="validateTimeslots">
        {{ __('Confirm') }}
    </x-filament::button>
</div>

<div class="flex justify-center hidden" wire:dirty.class.remove="hidden">
    <x-filament::button disabled>
        {{ __('Confirm') }}
    </x-filament::button>
</div>

<div class="flex justify-center" wire:dirty.class="hidden">
    <x-filament::button wire:click="validateTimeslots">
        {{ __('Confirm') }}
    </x-filament::button>
</div>

<div class="flex justify-center hidden" wire:dirty.class.remove="hidden">
    <x-filament::button disabled>
        {{ __('Confirm') }}
    </x-filament::button>
</div>

Gaming

Programming

Why wire:dirty not working with <x-filament::> components ?