search

imacrayon / alpine-ajax

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

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

Closed Jagadish056 closed 4 weeks ago

Jagadish056 commented 1 month 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 4 weeks 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 4 weeks 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 4 weeks 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.