Links are not working in description element

[wottpal]

Example:

  toast.success('Success', {
    description: `View <a href="https://google.com" target="_blank">Google</a>`,
  })

The link is rendering correctly and is detected by Chrome, but it isn't clickable. I assume some wrapper is preventing event propagation. 🤔

[bkilrain]

Looks like it's been fixed but not released yet https://github.com/emilkowalski/sonner/issues/378

[wottpal]

Looks like it's been fixed but not released yet #378

Actually I've checked out that issue and it's not the same. The html/node is rendering correctly if passed as a string. Even the links, they are just not clickable.

Though, I would say I find the way of passing nodes as strings and having them internally sanitized & rendered very counter intuitive, error-prone, and restrictive. Why not just using JSX.Element here, @emilkowalski? 🤔

[gurvirsinghbaraich]

Hi @wottpal, I found the issue interesting and when I reproduced the issue the link seems work properly. I believe there might be some issue with the CSS styles that you might have applied to the element or it's parent. Thanks.

[marcosfreitas]

I have a similar question about the HTML rendering that at least on the 1.5 version is not rendering correctly. Was it expected to work?

...

if (typeof content === 'object') {
  content = '<ul className="mt-2 ml-2">'
    + '<li>'+Object.values(content).join('</li><li>') + '</li>'
  + '</ul>';
}

toast.error('Could not save', { ...SonnerBottomRight, description: content, id: toastIDs.singleNotification })

[Kettss1]

i'm having this same exact error. this is my toast: toast.success('Success', { description:testing out this toast, }) i've also tried this, and got the same case: toast.success("testing out this <a href='https://sonner.emilkowal.ski/toast' target='_blank'>toast</a>")

[emilkowalski]

Fixed in #502

You can render custom elements inside the toast like <a /> or custom components by passing a function instead of a string. This work for both the title and description.

toast(
  () => (
    <>
      View{' '}
      <a href="https://google.com" target="_blank">
        Animation on the Web
      </a>
    </>
  ),
  {
    description: () => <button>This is a button element!</button>,
  },
);