Filament•16mo ago

$livewire->dispatchBrowserEvent('copy-to-clipboard') is not working on Safari

I have a header action that dispatches the 'copy-to-clipboard' event to the browser. However this is known to not work on Safari. There are workarounds using Javascript, but I don't know how to implement them with Filament. Do you guys have a suggestion?

->action(function (self $livewire, array $data): void {
                        $livewire->dispatchBrowserEvent('copy-to-clipboard', ['text' => 'test_text'])

->action(function (self $livewire, array $data): void {
                        $livewire->dispatchBrowserEvent('copy-to-clipboard', ['text' => 'test_text'])

7 Replies

Patrick Boivin•16mo ago

Have you found a workaround that you want to implement? An external JS library or something?

fmeccaniciOP•16mo ago

Yes I found it on StackOverflow (https://stackoverflow.com/questions/40147676/javascript-copy-to-clipboard-on-safari). There are multiple suggested implementations on this post.

Stack Overflow

Javascript Copy To Clipboard on safari?

It may be duplicate question but i didnt find the solution for this. I am trying to copy text on button click. Its working on chrome, mozilla(working on on windows and mac but not on linux). And i...

Patrick Boivin•16mo ago

Which solution do you want to try? What are you missing to make it work in Filament?

fmeccaniciOP•16mo ago

The second suggestion says that Safari implemented the Clipboard API 1 year ago. Which requires a small amount of javascript code:

navigator.clipboard.writeText("YOUR_TEXT").then(function() {

  /* clipboard successfully set */

}, function() {

  /* clipboard write failed */

});

navigator.clipboard.writeText("YOUR_TEXT").then(function() {

  /* clipboard successfully set */

}, function() {

  /* clipboard write failed */

});

What I am missing is how do I execute this piece of javascript code in the action of the table. This the stripped done table I currently have:

    public static function table(Table $table): Table
    {
        return $table->headerActions([
                Action::make('create')
                    ->action(function (self $livewire, array $data): void {
                        $livewire->dispatchBrowserEvent('copy-to-clipboard', [
                            'text' => 'link-I-want-to-copy',
                        ]);
            ])
    }

    public static function table(Table $table): Table
    {
        return $table->headerActions([
                Action::make('create')
                    ->action(function (self $livewire, array $data): void {
                        $livewire->dispatchBrowserEvent('copy-to-clipboard', [
                            'text' => 'link-I-want-to-copy',
                        ]);
            ])
    }

Because this table is inside a RelationManager class, which is used inside a Resource. This Resource is used inside a ListRecords class. But there is no associated blade file (or I cannot find it) where I can use a script tag to execute the javascript. I don't see a way to actually execute the Javascript, which is the main question I have. Do you know a way to execute this piece of Javascript?

Patrick Boivin•16mo ago

Ok, makes sense. I think I can give you an idea you can experiment with... Create a custom JS file to load into your Filament Admin:

// file: public/js/admin.js

window.addEventListener('copy-to-clipboard', (event) => {
    console.log("COPY", event.detail.text);
})

// file: public/js/admin.js

window.addEventListener('copy-to-clipboard', (event) => {
    console.log("COPY", event.detail.text);
})

    public function boot()
    {
        Filament::registerScripts([asset('js/admin.js')]);
    }

    public function boot()
    {
        Filament::registerScripts([asset('js/admin.js')]);
    }

Then, you can dispatch the event normally, from the Table Action:

->headerActions([
    Action::make('copyToClipboard')
        ->label('Copy to clipboard')
        ->action(function ($livewire) {
            $livewire->dispatchBrowserEvent('copy-to-clipboard', [
                'text' => 'HELLO',
            ]);
        })

    // ...
])

->headerActions([
    Action::make('copyToClipboard')
        ->label('Copy to clipboard')
        ->action(function ($livewire) {
            $livewire->dispatchBrowserEvent('copy-to-clipboard', [
                'text' => 'HELLO',
            ]);
        })

    // ...
])

fmeccaniciOP•16mo ago

Thanks @pboivin, I am able to import the JS! The clipboard functionality still doesn't work on Safari though. I tried every solution from StackOverflow. Could be out of the scope of Filament, but I'm not sure.

Patrick Boivin•16mo ago

I have no real experience with Safari unfortunately...

Gaming

Programming

$livewire->dispatchBrowserEvent('copy-to-clipboard') is not working on Safari