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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions