Filament•11mo ago

Icon disappearing after action animation

Using the latest filament as of today and having an issue with a custom action button of mine. Note, i am not saying its because of the latest as its a new button. Anyway, my code is

<x-filament::icon-button
    x-data="{
        exportProperties: function() {
            const propertyIds = window.filteredProperties.propertyIds;
            this.$wire.call('exportProperties', propertyIds, this.readCookie('propertyFilters'));
        }
    }"
    x-on:click="exportProperties()"
    wire:target="exportProperties"
    color="primary"
    icon="icon-pdf"
    size="xl"
/>

<x-filament::icon-button
    x-data="{
        exportProperties: function() {
            const propertyIds = window.filteredProperties.propertyIds;
            this.$wire.call('exportProperties', propertyIds, this.readCookie('propertyFilters'));
        }
    }"
    x-on:click="exportProperties()"
    wire:target="exportProperties"
    color="primary"
    icon="icon-pdf"
    size="xl"
/>

, but when i submit it, the animation runs and the action indeed works, but the icon never reappears until i refresh the page. No console errors either. Any suggestions?

7 Replies

Mark ChaneyOP•11mo ago

looking at the html, I am seeing

<svg wire:loading.remove.delay.default="1" wire:target="exportProperties" class="fi-icon-btn-icon h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="display: none;">
    <path fill-rule="evenodd" clip-rule="evenodd" d="........."></path>
</svg>

<svg wire:loading.remove.delay.default="1" wire:target="exportProperties" class="fi-icon-btn-icon h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="display: none;">
    <path fill-rule="evenodd" clip-rule="evenodd" d="........."></path>
</svg>

where the display:none is added, but its never removed after the animation is complete.

Mark ChaneyOP•11mo ago

You can see it happening above (you cant see the file download popup here, but it does, so the action does indeed complete). There is wire:ignore on a parent div to solve some other issues with the js map on the page, but that didnt cause any problems with lw2 and its pretty much needed at this point. Doesnt appear to be causing problems for the rest of the actions there either. Any ideas are appreciated as i cant migrate our production app to lw3/filament v3 stable until I get this resolved.

awcodes•11mo ago

Crazy shot in the dark, I wonder if it’s because your alpine method has the same name as your livewire method.

Mark ChaneyOP•11mo ago

I tried that too, no difference unfortunately. Wish I was at least getting a console error to help me figure out what is wrong, but I am not.

awcodes•11mo ago

hmm. Seems to be working ok for me.

awcodes•11mo ago

how are you rendering it?

Gaming

Programming

Icon disappearing after action animation