pulltorefresh.js icon indicating copy to clipboard operation
pulltorefresh.js copied to clipboard

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

Open jarmo opened this issue 2 years ago • 0 comments

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 https://github.com/BoxFactura/pulltorefresh.js/issues/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.

jarmo avatar May 28 '22 12:05 jarmo