Filament•19h ago

Issue with toggling actions

I've got two actions on an Infolist Section in the footer, a "Show" and "Hide" for an OAuth secret. When "Show" is clicked it works, except the "Show" button remains. I have to click it again for it to be aware of the state. Same with the "Hide" button. I've attached a video. The code for the actions is simple.

Infolists\Components\Actions\Action::make('Show')
    ->color('primary')
    ->hidden($this->showCredentials)
       ->action(function () {
       $this->showCredentials = true;
    }),

Infolists\Components\Actions\Action::make('Hide')
    ->color('primary')
    ->hidden(! $this->showCredentials)
    ->action(function () {
        $this->showCredentials = false;
    }),

Infolists\Components\Actions\Action::make('Show')
    ->color('primary')
    ->hidden($this->showCredentials)
       ->action(function () {
       $this->showCredentials = true;
    }),

Infolists\Components\Actions\Action::make('Hide')
    ->color('primary')
    ->hidden(! $this->showCredentials)
    ->action(function () {
        $this->showCredentials = false;
    }),