TextInput field copyable using hintAction

How can I make the TextInput copyable using a hintAction?

9 Replies

Abi•11mo ago

So far I have the following

TextInput::make('uuid')
 ->disabled()
 ->hintAction(fn(Get $get) => Action::make('Copy')->icon('heroicon-s-clipboard'))

TextInput::make('uuid')
 ->disabled()
 ->hintAction(fn(Get $get) => Action::make('Copy')->icon('heroicon-s-clipboard'))

Patrick Boivin•11mo ago

Maybe you can take inspiration from the TextEntry component: https://github.com/filamentphp/filament/blob/3.x/packages/infolists/resources/views/components/text-entry.blade.php#L97-L101

Mark Chaney•10mo ago

@.abishek did you end up getting this working? I have a similar need. havent jumped into it yet. Figured i would see if anyone else had solved it first

Abi•10mo ago

Not yet, had to move to other priorities, wasn't super critical, so just added to backlog. Let me know if you get this working

Flo•10mo ago

TextInput::make($name)
            ->extraAttributes(function ($state) {
                return [
                    'x-on:click' => 'window.navigator.clipboard.writeText("'.$state.'"); $tooltip("Copied to clipboard", { timeout: 1500 });',
                ];
            })
            ->suffixAction(
                Action::make('copy')
                    ->icon('heroicon-m-clipboard')
            );

TextInput::make($name)
            ->extraAttributes(function ($state) {
                return [
                    'x-on:click' => 'window.navigator.clipboard.writeText("'.$state.'"); $tooltip("Copied to clipboard", { timeout: 1500 });',
                ];
            })
            ->suffixAction(
                Action::make('copy')
                    ->icon('heroicon-m-clipboard')
            );

` Not ideal since a server call is made and the tooltip displays over the entire input, but it's a good start and it works!

Abi•10mo ago

@Flo this doesn't work. the quotes get escaped and cause an alpine/js error

Flo•10mo ago

Does your "$state" contain quotes?

Abi•10mo ago

its a string @Flo finally figured out a simpler way to do this

Abi•10mo ago

https://twitter.com/shakeofabiomen/status/1706261501617606914

Abishek R Srikaanth (@shakeofabiomen)

If you ever wanted to implement copy to clipboard functionality as an action on your @filament forms, here is a simple way to do it. #laravel #php #filament #Tips

Twitter

Gaming

Programming

TextInput field copyable using hintAction