Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove-me extension should check if DOM node is still connected #2497

Open
verheyenkoen opened this issue Apr 19, 2024 · 1 comment
Open

Comments

@verheyenkoen
Copy link

verheyenkoen commented Apr 19, 2024

When the remove-me timeout fires, it will remove the node with the remove-me attribute from the DOM, like this:

elt.parentElement.removeChild(elt);

However, in some cases, this node may already have been removed before the timeout fires and this code errors with:

Uncaught TypeError: Cannot read properties of null (reading 'removeChild')

A use case where this could happen is a flash toast message that also includes a dismiss button/icon (or gesture) and also removes the same node (or a parent) from the DOM.

I suggest to fix this using the Node.prototype.isConnected property within the setTimeout callback. Since IE11 compatibility is required, that would also require the isConnected-polyfill to be added.

@verheyenkoen
Copy link
Author

As an alternative, the timeoutID from setTimeout could be stored in the nodes' dataset, so we have a way to cancel the timeout before it fires using clearTimeout, eg:

if (timing) {
    elt.dataset.removeMeTimeout = setTimeout(function () {
        elt.parentElement.removeChild(elt);
    }, htmx.parseInterval(timing));
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant