How to know when a modal, opened via a Table action, has been closed?

I need to dispatch an event when a modal is closed. Right now I can do it when the "submit" button is clicked with

->action(function (array $data, Order $order) {
    $this->dispatch('order-scanner-modal-closed', true);
})

->action(function (array $data, Order $order) {
    $this->dispatch('order-scanner-modal-closed', true);
})

But I can not figure out how to do this on cancel. I've tried overriding by way of modalFooterActions with something like this:

->modalFooterActions([
    Action::make('submit')
        ->label('Link item to inventory')
        ->action(function (Action $action) {
            $this->dispatch('order-scanner-modal-closed', true);
        }),
    Action::make('cancel')
        ->label('Cancel')
        ->action(function () {
            $this->dispatch('order-scanner-modal-closed', false);
        }),
])

->modalFooterActions([
    Action::make('submit')
        ->label('Link item to inventory')
        ->action(function (Action $action) {
            $this->dispatch('order-scanner-modal-closed', true);
        }),
    Action::make('cancel')
        ->label('Cancel')
        ->action(function () {
            $this->dispatch('order-scanner-modal-closed', false);
        }),
])

This feels like progress because the correct code gets executed when the respective button gets clicked; however, it also feels like I'm moving backwards, because the modal doesn't automatically close like it would do out of the box using just action. So I solve one problem but encounter a new 🙂 I thought that modalCancelAction would be the way, but that is getting executed when the modal is being rendered so I must be misunderstanding its intention.

Solution:

Ok. I think it’s because you’re trying to override the existing actions without actually replacing the existing submit and close that are already cached. Try this approach instead: https://filamentphp.com/docs/3.x/actions/modals#modifying-a-default-modal-footer-action-button

Modals - Actions - Filament

Jump to solution

5 Replies

awcodes•4mo ago

Add $this->close(); after your dispatch. Might need to pass in $action in the callback and call $action->close() in this context though.

ChrisR•4mo ago

I tried this, but I get the same result:

->modalFooterActions([
    Action::make('submit')
        ->label('Link item to inventory')
        ->action(function (Action $action) {
            $this->dispatch('order-scanner-modal-closed', true);
            $action->close(true);
        }),
    Action::make('cancel')
        ->label('Cancel')
        ->action(function (Action $action) {
            $this->dispatch('order-scanner-modal-closed', true);
            $action->close(true);
        }),
])

->modalFooterActions([
    Action::make('submit')
        ->label('Link item to inventory')
        ->action(function (Action $action) {
            $this->dispatch('order-scanner-modal-closed', true);
            $action->close(true);
        }),
    Action::make('cancel')
        ->label('Cancel')
        ->action(function (Action $action) {
            $this->dispatch('order-scanner-modal-closed', true);
            $action->close(true);
        }),
])

The Action that I'm using here is Filament\Tables\Actions\Action. I'm getting a little confused because StaticAction, from what I can tell, is the only class that uses the CanClose trait, but maybe my IDE is failing me here.

ChrisR•4mo ago

message.txt

Solution

awcodes•4mo ago

Modals - Actions - Filament

ChrisR•4mo ago

Great - thanks! The code that is currently working is:

return $table
  ->query($query)
  ->actions([
      Action::make('scan-item')
          ->label('Scan Items')
          ->modalContent(fn(Order $order) => view('livewire.scanning.bar-code-scanner-wrapper', ['order' => $order]))
          ->modalWidth('Screen')
          ->modalCancelAction(false)
          ->modalSubmitAction(false)
          ->extraModalFooterActions(function (Action $action) {
              $submit = $action->makeModalSubmitAction('associateItems', ['associate' => true])
                  ->label('Associate Items');
              $cancel = $action->makeModalSubmitAction('cancel', ['cancel' => true]);
              return [ $submit, $cancel ];
          })
          ->action(function (array $data, array $arguments, Action $action): void {
              // from the $arguments I can know which button was clicked
              $this->dispatch('order-scanner-modal-closed', $data);
          })
          ->slideOver(),
  ])
  ->columns([
      ...
  ]);

return $table
  ->query($query)
  ->actions([
      Action::make('scan-item')
          ->label('Scan Items')
          ->modalContent(fn(Order $order) => view('livewire.scanning.bar-code-scanner-wrapper', ['order' => $order]))
          ->modalWidth('Screen')
          ->modalCancelAction(false)
          ->modalSubmitAction(false)
          ->extraModalFooterActions(function (Action $action) {
              $submit = $action->makeModalSubmitAction('associateItems', ['associate' => true])
                  ->label('Associate Items');
              $cancel = $action->makeModalSubmitAction('cancel', ['cancel' => true]);
              return [ $submit, $cancel ];
          })
          ->action(function (array $data, array $arguments, Action $action): void {
              // from the $arguments I can know which button was clicked
              $this->dispatch('order-scanner-modal-closed', $data);
          })
          ->slideOver(),
  ])
  ->columns([
      ...
  ]);

Gaming

Programming

How to know when a modal, opened via a Table action, has been closed?