Filament•8mo ago

Actions still visible when setting ->hidden()

I'm using actions in custom livewire components, but when setting ->hidden() the action is still visible and only disabled. How can i hide them when hidden?

5 Replies

Wiebe•8mo ago

this is what it renders

<button style="--c-300:var(--danger-300);--c-400:var(--danger-400);--c-500:var(--danger-500);--c-600:var(--danger-600);" class="fi-link relative inline-flex items-center justify-center font-semibold outline-none transition duration-75 hover:underline focus-visible:underline pointer-events-none opacity-70 fi-size-md fi-link-size-md gap-1.5 text-sm fi-color-custom text-custom-600 dark:text-custom-400 fi-ac-link-action" type="button" wire:loading.attr="disabled" wire:click="mountAction('delete')" disabled="disabled">
        <!--[if BLOCK]><![endif]-->            <!--[if BLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->

            <!--[if BLOCK]><![endif]-->                <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin fi-link-icon h-5 w-5 text-custom-600 dark:text-custom-400" wire:loading.delay.default="" wire:target="mountAction('delete')">
    <path clip-rule="evenodd" d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
    <path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
             <!--[if ENDBLOCK]><![endif]-->
         <!--[if ENDBLOCK]><![endif]-->

        Verwijderen

        <!--[if BLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->

        <!--[if BLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->
    </button>

<button style="--c-300:var(--danger-300);--c-400:var(--danger-400);--c-500:var(--danger-500);--c-600:var(--danger-600);" class="fi-link relative inline-flex items-center justify-center font-semibold outline-none transition duration-75 hover:underline focus-visible:underline pointer-events-none opacity-70 fi-size-md fi-link-size-md gap-1.5 text-sm fi-color-custom text-custom-600 dark:text-custom-400 fi-ac-link-action" type="button" wire:loading.attr="disabled" wire:click="mountAction('delete')" disabled="disabled">
        <!--[if BLOCK]><![endif]-->            <!--[if BLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->

            <!--[if BLOCK]><![endif]-->                <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="animate-spin fi-link-icon h-5 w-5 text-custom-600 dark:text-custom-400" wire:loading.delay.default="" wire:target="mountAction('delete')">
    <path clip-rule="evenodd" d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill-rule="evenodd" fill="currentColor" opacity="0.2"></path>
    <path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="currentColor"></path>
</svg>
             <!--[if ENDBLOCK]><![endif]-->
         <!--[if ENDBLOCK]><![endif]-->

        Verwijderen

        <!--[if BLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->

        <!--[if BLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->
    </button>

ChesterS•8mo ago

Hidden should be hiding it 🤔 Can you show the code example please?

Wiebe•8mo ago

public function deleteAction(): Action
    {
        return Action::make('delete')
                     ->label('Verwijderen')
                     ->requiresConfirmation()
                     ->link()
                     ->modalCloseButton(false)
                     ->hidden()
                     ->color('danger')
                     ->action(function(){
                         ...
                     });
    }

public function deleteAction(): Action
    {
        return Action::make('delete')
                     ->label('Verwijderen')
                     ->requiresConfirmation()
                     ->link()
                     ->modalCloseButton(false)
                     ->hidden()
                     ->color('danger')
                     ->action(function(){
                         ...
                     });
    }

ChesterS•8mo ago

this should work. It's pretty much the same setup I have and it works as expected. How are you rendering this in your template? Ok I was testing this in a button group - in which case it works as expected. But it doesn't work by itself. You have to check manually it seems

<div>
@if( $this->deleteAction->isVisible() )
  {{ $this->deleteAction }} 
@endif
</div>

<div>
@if( $this->deleteAction->isVisible() )
  {{ $this->deleteAction }} 
@endif
</div>

or something like that

jaocero•8mo ago

Thank youuu will try it

Gaming

Programming

Actions still visible when setting ->hidden()