Weird behavior with data-confirm in LiveComponent

Phoenix Forum Questions / Help
, ,
1

Hi,

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",
    phx_value_id: @resource.id,
    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:

<.link
    :if={some_condition}
    href="#"
    data-confirm="Are you sure?"
    phx-value-id={@resource.id}
    phx-click="terminate"
>
  I'm a link
</.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.

2

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

Do they share the same layout template?

3

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 = e.target;
    if (e.defaultPrevented) return;

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

      if (!element.dispatchEvent(phoenixLinkEvent)) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
      }

      if (element.getAttribute("data-method") && element.getAttribute("data-to")) {
        handleClick(element, e.metaKey || e.shiftKey);
        e.preventDefault();
        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.

4

That is odd.

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

5

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