Filament•3mo ago

Clean way to avoid escaping of quotes in JS in extraAttributes

Hi all I'm using HtmlString when using JS in extraAttributes() but it's adding slashes before all single and double quotes. The only way I've been able to avoid that is by using Illuminate\Support\Js:

->extraAttributes([
   'x-on:click' => new HtmlString('$el.classList.add(' . Js::from('pointer-events-none') . ',' . Js::from('opacity-70') . ')'),
]);

->extraAttributes([
   'x-on:click' => new HtmlString('$el.classList.add(' . Js::from('pointer-events-none') . ',' . Js::from('opacity-70') . ')'),
]);

Which isn't very readable... Is there a cleaner of doing this?

Solution:

->extraAttributes(['x-on:click' => new HtmlString('$el.classList.add(\'pointer-events-none\', \'opacity-70\')')])

->extraAttributes(['x-on:click' => new HtmlString('$el.classList.add(\'pointer-events-none\', \'opacity-70\')')])

?...

Jump to solution

3 Replies

binaryfire•3mo ago

If I use HtmlString without the Js helper like:

'x-on:click' => new HtmlString('$el.classList.add("pointer-events-none", "opacity-70")')

'x-on:click' => new HtmlString('$el.classList.add("pointer-events-none", "opacity-70")')

I end up with:

x-on:click="$el.classList.add(\" pointer-events-none\",="" \"opacity-70\")"="

x-on:click="$el.classList.add(\" pointer-events-none\",="" \"opacity-70\")"="

bump

Solution

LeandroFerreira•3mo ago

->extraAttributes(['x-on:click' => new HtmlString('$el.classList.add(\'pointer-events-none\', \'opacity-70\')')])

->extraAttributes(['x-on:click' => new HtmlString('$el.classList.add(\'pointer-events-none\', \'opacity-70\')')])

binaryfire•3mo ago

Works, thank you! I could have sworn I tried that lol

Gaming

Programming

Clean way to avoid escaping of quotes in JS in extraAttributes