search

imacrayon / alpine-ajax

An Alpine.js plugin for building server-powered frontends.
https://alpine-ajax.js.org
MIT License
666 stars 15 forks source link

this.$el points to button instead of x-data element #87

Closed Jagadish056 closed 3 months ago

Jagadish056 commented 3 months ago

In the Notifications, this.$el in dismiss() points to the button instead of the parent x-data element, causing the wrong element to be removed.

Suggestion: Use this.$data.$el && setTimeout(() => this.$data.$el.remove(), 500) to fix the issue.

imacrayon commented 3 months ago

Hey, thanks for the big report. Can you please clarify where this is breaking? I double checked the example in Safari & Firefox but I see no issue. Is it a specific browser or maybe a different version of Alpine?

Jagadish056 commented 3 months ago

Sorry for the confusion, and thank you for the follow-up!

This isn't a code-breaking issue but more of a behavior observation. When the button is clicked, the notification list isn't removed immediately. Instead, the removal is deferred until the timeout in the init() method finishes. During this process, the button itself is removed instead of the x-data element, which might not be the expected behavior. This means that the entire notification item isn't removed when we want, and we have to wait for the init timeout to complete.

You can observe this behavior in the second-to-last example (the one without setTimeout() in the init method). Here, the removal of the notification item doesn't happen as expected, and the button is removed first.

I hope this clarifies my point.

imacrayon commented 3 months ago

Ah, thanks for the clarification, and good catch! I swapped out $el for $root so that the notification is properly removed from the DOM now.