Filament•10mo ago

Copy to Clipboard Inside Custom Livewire Form

Hey guys, I'm trying to do something really simple but for some reason it is not working. I have a list of variables that I need to show in some views, and this list is copyable, so when user click in a LI, copy to clipboard and show a notification. It works as a charm when I'm using this script inside an view, and doesn't works in other. One is just a list with LI and other is a dropdown, that when click on item, must copy. Both are executing "Notification" from filament, but one copy, other none.

Solution:

The problem is when using x-filament::dropdown.list.item, if I remove and put a List item, works.

Jump to solution

2 Replies

leoblanskiOP•10mo ago

Here works:

<div x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('copy-clipboard'))]">
    ...
    <ul>
        <?php $vars = App\Models\EmailTemplate::VARIABLES; ?>
        @foreach ($vars as $var)
            <li class="list-item" wire:click="$dispatch('copy-to-clipboard', '%|{{ $var }}|%')">
                <x-filament::icon alias="panels::topbar.global-search.field" icon="heroicon-o-clipboard-document"
                    class="h-4 w-8 m-0 text-gray-500 dark:text-gray-400 mr-2" />
                <span>{{ $var }}<br></span>
            </li>
        @endforeach
    </ul>
</

<div x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('copy-clipboard'))]">
    ...
    <ul>
        <?php $vars = App\Models\EmailTemplate::VARIABLES; ?>
        @foreach ($vars as $var)
            <li class="list-item" wire:click="$dispatch('copy-to-clipboard', '%|{{ $var }}|%')">
                <x-filament::icon alias="panels::topbar.global-search.field" icon="heroicon-o-clipboard-document"
                    class="h-4 w-8 m-0 text-gray-500 dark:text-gray-400 mr-2" />
                <span>{{ $var }}<br></span>
            </li>
        @endforeach
    </ul>
</

Here doesn't work

<div x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('copy-clipboard'))]">
            @foreach ($data as $item)
                <x-filament::dropdown.list.item wire:click="$dispatch('copy-to-clipboard', 'lalalal')">
                    {{ $item }}
                </x-filament::dropdown.list.item>
            @endforeach
</div>

<div x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('copy-clipboard'))]">
            @foreach ($data as $item)
                <x-filament::dropdown.list.item wire:click="$dispatch('copy-to-clipboard', 'lalalal')">
                    {{ $item }}
                </x-filament::dropdown.list.item>
            @endforeach
</div>

Basically the same code, both calling wire:click="$dispatch('copy-to-clipboard', '{{ $item }}')" Both are showing the notification:

window.addEventListener('copy-to-clipboard', (event) => {
  const el = document.createElement('textarea');
  el.value = event.detail;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);

  new FilamentNotification()
      .title(`Copied to clipboard: ${event.detail}`)
      .success()
      .duration(3000)
      .send();
});

window.addEventListener('copy-to-clipboard', (event) => {
  const el = document.createElement('textarea');
  el.value = event.detail;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);

  new FilamentNotification()
      .title(`Copied to clipboard: ${event.detail}`)
      .success()
      .duration(3000)
      .send();
});

Solution

leoblanski•10mo ago

The problem is when using x-filament::dropdown.list.item, if I remove and put a List item, works.

Gaming

Programming

Copy to Clipboard Inside Custom Livewire Form