Weird behavior with data-confirm in LiveComponent


I have a LiveComponent in a LiveView used as following:

<.live_component module={MyLiveComponent} />

In my LiveComponent I have a link:

<%= link("Link that works",
    to: "#",
    phx_click: "delete",
    data: [
        confirm: "Are you sure?"
) %>

This link is working well with data-confirm. I have a popup to confirm my action.

I also have this link:

    data-confirm="Are you sure?"
  I'm a link

But this one doesn’t work. The function terminate is called without any popup to confirm.

I tried to change my <.link> to a <%= link %>, but this is the same behavior.

What could be wrong ?

My deps :

{:phoenix, "~> 1.7"},
{:phoenix_html, "~> 4.1"},
{:phoenix_html_helpers, "~> 1.0"},
{:phoenix_live_view, "~> 0.20.14"},
{:phoenix_view, "~> 2.0"}

Thanks for your help.

It sounds like the phoenix_html JS file is not loaded for the <.link /> example.

Do they share the same layout template?

Yes, they share the same template.

I tried to debug phoenix_html , here is the library code when a click is triggered:

window.addEventListener("click", function(e) {
    var element =;
    if (e.defaultPrevented) return;

    while (element && element.getAttribute) {
      var phoenixLinkEvent = new PolyfillEvent('', {
        "bubbles": true, "cancelable": true

      if (!element.dispatchEvent(phoenixLinkEvent)) {
        return false;

      if (element.getAttribute("data-method") && element.getAttribute("data-to")) {
        handleClick(element, e.metaKey || e.shiftKey);
        return false;
      } else {
        element = element.parentNode;
  }, false);

When I’m clicking on the non-functional link, I have e.defaultPrevented which is equal to true and so it returns before calling element.dispatchEvent(phoenixLinkEvent) used to manage the data-confirm popup.

That is odd.

I checked the same JS and when clicking I have e.defaultPrevented as false.

The problem was the href="#" is my <.link>. When I remove it, the data-confirm works well.