Skip to content

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

@jarmo

Description

@jarmo

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions