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

destroyAll does not destroy all thus causing PullToRefresh misbehave when styleEl has been removed from DOM #119

Open
jarmo opened this issue May 28, 2022 · 0 comments

Comments

@jarmo
Copy link

jarmo commented May 28, 2022

Bug report

Calling destroyAll keeps some state even though the word All implies that it's clean slate. For example it does not care about _shared.styleEl or _shared object contents at all which might cause problems.

Fixes a problem reported previously in #108

Current behavior:

Keeping global state between destroyAll and init might cause a problem where SPA type application is used and head is modified in the DOM in a way that PullToRefresh styleEl is removed from it, which is used internally by PullToRefresh.

For example, I'm using a library called morphdom to patch head and body after fetch request and this also removes styleEl. It should not be a problem in itself because I'm also calling PullToRefresh.destroyAll() before patching and PullToRefresh.init() after patching the DOM.

However, since PullToRefresh setupDOM function only checks if _shared.styleEl has a value, but does not care about the styleEl being part of the DOM. It just assumes that it is part of the DOM.

A quick fix would be to change setupDOM to this:

function setupDOM(handler) {
...
      if (!_shared.styleEl) {
        _shared.styleEl = document.createElement('style');
        _shared.styleEl.setAttribute('id', 'pull-to-refresh-js-style');
      }

      if (!_shared.styleEl.parentNode) {
        document.head.appendChild(_shared.styleEl);
      }

      _shared.styleEl.textContent = handler.getStyles().replace(/__PREFIX__/g, handler.classPrefix).replace(/\s+/g, ' ');
...
}

Basically we should check that styleEl is part of the DOM and if not then put it there.

Expected behavior:

Should even work when PullToRefresh internally used element for styling is removed from DOM.

JSFiddle URL for demo with bug:
N/A

Browsers affected:
Every browser.

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