TextInput component SuffixAction

[yob-yob]

TextInput component SuffixAction

I was having a really hard time implementing the suffixAction feature for the TextInput component on Filament so I did some digging...

Here's what I found and how to use it. (This should be on the documentation)

The Problem

Say we have this sample code to get us started on the same page...

use Forms\Components\TextInput;
use Forms\Components\Actions\Action;
use App\Models\Invite;

TextInput::make('code')
    ->disabled()
    ->default(fn () => Invite::generateCode())
    ->hint("Invite code is autogenerated"),

So now, you want to add ->suffixAction() into it so that the user would be able to generate new codes if they wanted...
for some random client nonsense reason... so you added it...

TextInput::make('code')
    ->disabled()
    ->default(fn () => Invite::generateCode())
    ->suffixAction(
        Action::make('generateNewCode')->action(fn (TextInput $component) => $component->state(Invite::generateCode()))
    )
    ->hint("Invite code is autogenerated"),

That would cause an error... and you'll get lost on the documentation just to find a fix...

The error...
Typed property Filament\Forms\Components\Actions\Action::$component must not be accessed before initialization

so how should we fix this?

The Solution

Register the action...

How? Well first we need to store the action into a variable...

$generateNewCode = Action::make('generateNewCode')
        ->action(
            fn (TextInput $component) => $component->state(Invite::generateCode())
        );

Then... we use ->registerActions()... this method accepts an array of [actionName => actionObject]

TextInput::make('code')
    ->disabled()
    ->default(fn () => Invite::generateCode())
    ->registerActions([
        'generateNewCode' => $generateNewCodeAction
    ])
    ->suffixAction($generateNewCodeAction)
    ->hint("Invite code is autogenerated"),

Remember... generateNewCode is our action-name... because it is what put into Action::make({name})...

How I found out about this?

I dived into the source-code, it's a very good way to understand the ins-&-out of a framework...

basically... BelongsToSelect has this createOptionForm method, which automatically creates the action for you and registers it to the select component then add it as a suffix...

How Filament can improve from this?

it should document registerActions and suffixAction

and also, when using suffixAction it should automatically registers the action.

That's it, thanks for reading...

[ryangjchandler]

I think we should handle this a lot better, yeah. The docs are on Git too, feel free to PR them.

[danharrin]

It's not been documented yet because it's still a new feature and I wasn't 100% sure on the syntax, so was not willing to let people use it in case I wanted to make breaking changes.

We should register the action automatically when it's passed to suffixAction() or prefixAction(), maybe?

[yob-yob]

You can document it soon when you're ready, but yes I do think registering the action automatically is the way to go, and that should be something needed to be implemented.

P.S. Since I already got your attention, I would just like to compliment the way you've built this, the simplicity is mind blowing, I can literally trace anything, I don't even need comments to trace the code, because the code documents itself, amazing. 👏🏻 it's really easy to teach to my colleagues. Thank you for building such an amazing tool.

[DougSisk]

I've opened #3276 that adds automatic registration

[danharrin]

#3276 has been merged, which brings several improvements to the form component actions DX

registerActions() may now be called with just the action objects, the duplicate names are not required:

 ->registerActions([
-    $action->getName() => $action,
+    $action,
 ])

And also, prefix & suffix actions are autoregistered:

-registerActions([
-    $prefixAction->getName() => $prefixAction,
-    $suffixAction->getName() => $suffixAction,
-])
 ->prefixAction($prefixAction)
 ->suffixAction($suffixAction)

[lucacalcaterra]

TextInput component SuffixAction

I was having a really hard time implementing the suffixAction feature for the TextInput component on Filament so I did some digging...

Here's what I found and how to use it. (This should be on the documentation)

The Problem

Say we have this sample code to get us started on the same page...

use Forms\Components\TextInput;
use Forms\Components\Actions\Action;
use App\Models\Invite;

TextInput::make('code')
    ->disabled()
    ->default(fn () => Invite::generateCode())
    ->hint("Invite code is autogenerated"),

So now, you want to add ->suffixAction() into it so that the user would be able to generate new codes if they wanted... for some random client nonsense reason... so you added it...

TextInput::make('code')
    ->disabled()
    ->default(fn () => Invite::generateCode())
    ->suffixAction(
        Action::make('generateNewCode')->action(fn (TextInput $component) => $component->state(Invite::generateCode()))
    )
    ->hint("Invite code is autogenerated"),

That would cause an error... and you'll get lost on the documentation just to find a fix...

The error... Typed property Filament\Forms\Components\Actions\Action::$component must not be accessed before initialization

so how should we fix this?

The Solution

Register the action...

How? Well first we need to store the action into a variable...

$generateNewCode = Action::make('generateNewCode')
        ->action(
            fn (TextInput $component) => $component->state(Invite::generateCode())
        );

Then... we use ->registerActions()... this method accepts an array of [actionName => actionObject]

TextInput::make('code')
    ->disabled()
    ->default(fn () => Invite::generateCode())
    ->registerActions([
        'generateNewCode' => $generateNewCodeAction
    ])
    ->suffixAction($generateNewCodeAction)
    ->hint("Invite code is autogenerated"),

Remember... generateNewCode is our action-name... because it is what put into Action::make({name})...

How I found out about this?

I dived into the source-code, it's a very good way to understand the ins-&-out of a framework...

basically... BelongsToSelect has this createOptionForm method, which automatically creates the action for you and registers it to the select component then add it as a suffix...

How Filament can improve from this?

it should document registerActions and suffixAction

and also, when using suffixAction it should automatically registers the action.

That's it, thanks for reading...

registerActions

Is still this solution viable ? I cannot manage it to work :-( . I want to add an action button on form to calc field.