Filament•3w ago

Is it possible to make a custom action behave/look like as submit button?

Sorry if the title makes no sense. When you upload files to a filament form, the 'submit' button changes (The label changes to 'Uploading files...', the button gets disabled and a loading indicator is added) Is it possible to have the same behaviour with a custom action? The only thing I managed to do is disable the button with a custom attribute

public function doSomethingAction(): Action
{
    return Action::make('doSomethingAction')
        ->label('Do something')
        ->extraAttributes([
            'wire:loading.attr' => 'disabled',
            'x-bind:disabled' => 'isProcessing',
            'type' => 'submit',
        ])
        ->action(function (array $data) {
          ....
        });
}

public function doSomethingAction(): Action
{
    return Action::make('doSomethingAction')
        ->label('Do something')
        ->extraAttributes([
            'wire:loading.attr' => 'disabled',
            'x-bind:disabled' => 'isProcessing',
            'type' => 'submit',
        ])
        ->action(function (array $data) {
          ....
        });
}

Is there a way to get the rest of the functionality? (change the label, add a loading indicator etc)

Solution:

FWIW, I found a way to do this 1) Add an id to your form ```html <form id="my-form-id">...</form>...

Jump to solution

1 Reply

Solution

ChesterS•3w ago

FWIW, I found a way to do this 1) Add an id to your form

<form id="my-form-id">...</form>

<form id="my-form-id">...</form>

2) Change your action to something like this

public function doSomethingAction(): Action
{
  return Action::make('doSomething')
      ->extraAttributes([
          // This is the 'ugly' part. Need to prevent the form from being submitted by default
          // so instead we define a method we need to call and pass it to the wire:click attr
          'wire:click.prevent' => 'doSomething', 
      ])
      ->submit('my-form-id') // Your form id goes here
}

public function doSoemething(): void {
  $this->validate();

  $data = $this->myForm->getState();
    ...
}

public function doSomethingAction(): Action
{
  return Action::make('doSomething')
      ->extraAttributes([
          // This is the 'ugly' part. Need to prevent the form from being submitted by default
          // so instead we define a method we need to call and pass it to the wire:click attr
          'wire:click.prevent' => 'doSomething', 
      ])
      ->submit('my-form-id') // Your form id goes here
}

public function doSoemething(): void {
  $this->validate();

  $data = $this->myForm->getState();
    ...
}

Not pretty but it works ¯\_(ツ)_/¯ Hope it helps. Let me know if you find a better way please!

Gaming

Programming

Is it possible to make a custom action behave/look like as submit button?