F
Filament•4w ago
bernhard

Notifications with links in it - weird autofocus

I am using the database notifications in my livewire component (outside panel). Everything works fine, except one thing: When adding a link to the notification, it shows a weird circle around the first link (see screenshot). This only happens to the first link. It looks like its not "autofocus" but "focus-visible". Adding focus:outline-0 focus:border-transparent focus:ring-0 to the link doesnt help at all. How to prevent this? This is on Desktop (Google Chrome under Linux) and mobile (chrome under Android) as well.
No description
7 Replies
bernhard
bernhardOP•3w ago
Any ideas anyone?
toeknee
toeknee•3w ago
How are you building that notification?
bernhard
bernhardOP•3w ago
@toeknee Do you mean this? 
Notification::make("test")
    ->title('Preisalarm für ' . $this->name)
    ->info()
    ->body("Der Wunschpreis für <a href='" . $alert->product->getUrl() . "' class='font-bold underline'>" . $alert->product->name . "</a> wurde erreicht. Das Produkt kostet aktuell nur mehr " . euro($price))
    ->sendToDatabase($this->user);
Notification::make("test")
    ->title('Preisalarm für ' . $this->name)
    ->info()
    ->body("Der Wunschpreis für <a href='" . $alert->product->getUrl() . "' class='font-bold underline'>" . $alert->product->name . "</a> wurde erreicht. Das Produkt kostet aktuell nur mehr " . euro($price))
    ->sendToDatabase($this->user);
toeknee
toeknee•3w ago
Yep
bernhard
bernhardOP•3w ago
And this is the resulting HTML from dev toolbar 
<div class="fi-no-notification-body overflow-hidden break-words text-sm text-gray-500 dark:text-gray-400 mt-1">
    Der Wunschpreis für <a href="http://www.example.com/products/123/xxx-grosse-vielfalt" class="font-bold underline">Merci Große Vielfalt</a> wurde erreicht. Das Produkt kostet aktuell nur mehr 3,99 €
</div>
<div class="fi-no-notification-body overflow-hidden break-words text-sm text-gray-500 dark:text-gray-400 mt-1">
    Der Wunschpreis für <a href="http://www.example.com/products/123/xxx-grosse-vielfalt" class="font-bold underline">Merci Große Vielfalt</a> wurde erreicht. Das Produkt kostet aktuell nur mehr 3,99 €
</div>
toeknee
toeknee•3w ago
Can you create a reproduction repo so we can similate what's causing it?
bernhard
bernhardOP•3w ago
I will try, but I guess that it is a very specific problem, so it will be hard to simulate the exact behavior without using to much internal code. I will post when I finished it

Did you find this page helpful?