TextInput field copyable using hintAction

How can I make the TextInput copyable using a hintAction?

9 Replies

AbiOP•16mo 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•16mo 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•15mo 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

AbiOP•15mo 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•15mo 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!

AbiOP•15mo ago

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

Flo•15mo ago

Does your "$state" contain quotes?

AbiOP•15mo ago

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

AbiOP•15mo 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