Mutation observer enters infinite loop if the same element is observed in callback after disconnect

[vparchas]

Basic info:

• Node.js version: 12.18.3
• jsdom version: 16.5.2

Minimal reproduction case

let callbackCount = 0;
const div1 = document.createElement('div');
document.body.appendChild(div1);
const observer = new MutationObserver(() => {
    callbackCount += 1;
    // prevents infinite loop
    if (callbackCount >= 10) {
        return;
    }
    observer.disconnect();
    observer.observe(div1, {attributes: true});
});
observer.observe(div1, { attributes: true });
div1.setAttribute('data-test', 'test');

// flush queue
new Promise(resolve => resolve()).then(() => {
    console.log('callback calls: ' + callbackCount);
});

Expected: callback calls: 1
Actual: callback calls: 10

How does similar code behave in browsers?

Outputs callback calls: 1

https://jsbin.com/hepidugamo/edit?js,console

This is similar to #3096 however not quite the same, as this refers observing the same element and not a different element.

[vparchas]

A simple fix for this would be to check if the node exists in the nodeList of the MutationObserver before pushing it:

observe(target, options) {
    [...]

    const existingRegisteredObserver = target._registeredObserverList.find(registeredObserver => {
      return registeredObserver.observer === this;
    });

    if (existingRegisteredObserver) {
      for (const node of this._nodeList) {
        node._registeredObserverList = node._registeredObserverList.filter(registeredObserver => {
          return registeredObserver.source !== existingRegisteredObserver;
        });
      }

      existingRegisteredObserver.options = options;
    } else {
      target._registeredObserverList.push({
        observer: this,
        options
      });

      // Add this check here
      if (this._nodeList.indexOf(target) < 0)
        this._nodeList.push(target);
    }
  }

[TimothyGu]

Thanks for your help in debugging this!