Alpine event handlers can't see captured variables if the element has font-awesome styles

[Morozzzko]

The title may seem a bit odd, but I think the fault is on alpine side.

Here's what I do:

1. I include Alpine 2.8.2 and font-awesome 5.15.3 to my page
2. I set up a root object using x-data="{ items: [..., ..., ...] }
3. Inside a template <template x-for="(id, idx) in items)
4. I add a tag which has an onclick event handler and fontawesome styles: <i class="fa fa-trash" @click="console.log(idx)"></i>
5. Whenever I click on the element, I get an error: Uncaught (in promise) ReferenceError: idx is not defined

However, I expect to see the value of idx in the console.

It seems like font-awesome adds their own event handlers and Alpine tries to wrap them in some way, but fails.

I'm running Firefox 88.0.1, Alpine 2.8.2 and font-awesome 5.15.3

Here's a codepen which illustrates the problem: https://codepen.io/morozzzko/pen/QWpMzmp

[filip-mestric]

When using FontAwesome js, the original <i> tag is replaced with <svg> tag, while <i> tag is commented out. It seems that events, directives, etc. are not carried over to new <svg> tag. What I usually do to circumvent that is to wrap an icon in another tag, such as <span> or <div>, and bind events to that parent tag.

[Morozzzko]

Yes, indeed, the replacement seems to be the reason. The solution to wrap the element and bind to the wrapper is a good one and I confirm that it works.

However, I feel like the events are carried over to the SVG tag, and it's exactly the problem. It would have saved me hours of debbuging if instead of throwing a cryptic error, the click did absolutely nothing. I would have opened DOM, noticed a different tag, and perhaps figured things out.

Instead, we get a hard-to-comprehend error and it would be awesome if there's a simple solution to give a meaningful error

[SimoTod]

The events are not carried over as far as i know. The attributes are so your svg gets to have the alpine directives. Because you are not using a standard variable but a loop iteration variable, when fontawesome replace the item, Alpine sees a new dom item with a directive, tries to evaluate it in the scope of the element and fails.
As you can understand, there's really little Alpine can do to warn you.

[Morozzzko]

We may be talking about different meaning of "carried over", so that might confuse me.

Here's what I was talking about:

1. onclick event handler gets run even though the original element was hidden and a new one was introduced
2. the new element has an onclick handler, as seen in inspector

which leads me to believe that it might be possible to detect similar situations

But yeah, if it's impossible to fix on the Alpine side, I think it's safe to close the issue. After all, there's a fix to this problem so folks are covered.

Or perhaps it deserves a small note in docs.

[SimoTod]

I think we are talking about the same thing (i was just decribe the root cause from the alpine internal prospective).

I believe the onclick handler you see in console is the one generated by @click on the svg, not the original one.

1. Alpine runs the x-for and insert a i tag attaching a click event because of the @click (fully working, it's evaluated in the loop scope)
2. fontawesome detects the i and replace it with a svg copying the attributes (including @click), the handler is not connected to an element anymore so the garbage collector will delete it eventually.
3. Alpine sees the new svg tag with a @click inside the component so it attaches a new handler. The new handler is evaluated in the component scope so it doesn't know about the loop variable.

Basically the svg element for alpine is just a new element dinamically inserted in your page at run time, Alpine doesn't know that it's a replacement for the old i tag.

Fontawesome technically knows a bit more but i don't think they'll do anything because it's quite tailored to the Alpine use case.

I hope it makes sense