Filament•5mo ago

Field getting focus wrongly with "CopyToClipboard" Action

Hi Guys! I have created a JavaScript function to be used within some components, allowing users to copy values to the Clipboard. This is done in a legacy way, by creating a textarea, inserting the value, and then executing the copy action. When I open the modal action and select an item to copy without interacting with input forms, it works like a charm. Also, when using "body" with the

mohamedsabil83/filament-forms-tinyeditor

mohamedsabil83/filament-forms-tinyeditor

plugin, it works seamlessly. However, when I click on another input field and then try to copy, the copied value is from the last focused field. Example: Works: Open Action -> Merge Fields -> Click on list -> Copy perfectly; Works: Open Action -> Add some info to Body -> Merge Fields -> Click on list -> Copy perfectly; Doesn't work: Open Action -> Click on subject -> Click on merge fields -> Even if I click on the body, the focus continues to be on the last input I clicked on. Do you guys have any ideas? I've tried forcing

->autofocus(false)

->autofocus(false)

but it still doesn't work. Initially, I attempted to focus on the created textarea in my script, but it still isn't functioning as expected.

2 Replies

leoblanski•5mo ago

JS:

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();
});

Livewire Component

<div x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('copy-clipboard'))]">
    @foreach ($data as $item)
        <li class="mt-2 mb-4 flex items-center justify-between cursor-pointer font-medium"
            wire:click="$dispatch('copy-to-clipboard', '{{ $item }}')" x-on:click="toggle">
            <span>{{ $item }}</span>
        </li>
    @endforeach
</div>

<div x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('copy-clipboard'))]">
    @foreach ($data as $item)
        <li class="mt-2 mb-4 flex items-center justify-between cursor-pointer font-medium"
            wire:click="$dispatch('copy-to-clipboard', '{{ $item }}')" x-on:click="toggle">
            <span>{{ $item }}</span>
        </li>
    @endforeach
</div>

leoblanski•5mo ago

Example:

Gaming

Programming

Field getting focus wrongly with "CopyToClipboard" Action