© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•16mo ago•
7 replies
moinmichi

Closing table action modal by another livewire component

I am loading a livewire component with modalContent() as a custom action in a table action. The livewire component serves a form, which listen for the event 'saveVariable'. I trigger the event by the action button of the table action. That works fine, but the modal is always closed, even if the form validation fails.
Beacuse of that I'm halting the action after dispatching the event 'saveVariable' to prevent the modal from closing. I submit the modal id (xxxxxx-table-action) with the event and in the livewire component I dispatch the event 'close-modal' with the modal id if the form validates. That works fine, but I'm afraid, that in the future the id of the modal could be changed and therefor my code will be broken. Is there a way to get the name of the modal progrmatical? Or is there another way to close the modal after the form is validated?

This is the table action:

TableAction::make('edit')
    ->modalContent(
      fn(Variable $variable): View => view(
        'livewire.system.system-settings.system-setting-form',
          [
            'variable' => $variable,
            'currentComponent' => static::getVariableComponent($variable)
          ]
        )
      )
    ->slideOver()->action(function (Tables\Actions\Action $action, Component $livewire) {
        $livewire->dispatch('saveVariable', $livewire->getId() . '-table-action');
          $action->halt();
        })
TableAction::make('edit')
    ->modalContent(
      fn(Variable $variable): View => view(
        'livewire.system.system-settings.system-setting-form',
          [
            'variable' => $variable,
            'currentComponent' => static::getVariableComponent($variable)
          ]
        )
      )
    ->slideOver()->action(function (Tables\Actions\Action $action, Component $livewire) {
        $livewire->dispatch('saveVariable', $livewire->getId() . '-table-action');
          $action->halt();
        })


And this is the part of the livewire component, which validates the form and closes the modal:

 #[On('saveVariable')]
    public function saveVariable($modalId = null): void
    {
        $this->validate();
        VariableService::instance()->update($variable);
      
        $this->dispatch('close-modal', id: $modalId);
     }
 #[On('saveVariable')]
    public function saveVariable($modalId = null): void
    {
        $this->validate();
        VariableService::instance()->update($variable);
      
        $this->dispatch('close-modal', id: $modalId);
     }
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

Livewire Table component in a action modal
FilamentFFilament / ❓┊help
10mo ago
Modal Action with Custom Livewire component
FilamentFFilament / ❓┊help
3y ago
Filament table in Modal - livewire component
FilamentFFilament / ❓┊help
2y ago
Modal: Livewire component
FilamentFFilament / ❓┊help
2y ago