Merge pull request #161 from stimulusjs/fix-matching-synchronous-disc…

…onnects

Mutation observers: Avoid adding disconnected elements

package.json

@@ -37,7 +37,7 @@
     "tslint": "^5.7.0",
     "typedoc": "^0.11.1",
     "typedoc-plugin-stimulus": "file:packages/typedoc-plugin-stimulus",
-    "typescript": "^2.8.1",
+    "typescript": "^2.8.4",
     "webpack": "^3.10.0"
   }
 }

packages/@stimulus/mutation-observers/src/element_observer.ts

@@ -90,13 +90,19 @@ export class ElementObserver {
 
   private processRemovedNodes(nodes: NodeList) {
     for (const node of Array.from(nodes)) {
-      this.processNode(node, this.removeElement)
+      const element = this.elementFromNode(node)
+      if (element) {
+        this.processTree(element, this.removeElement)
+      }
     }
   }
 
   private processAddedNodes(nodes: NodeList) {
     for (const node of Array.from(nodes)) {
-      this.processNode(node, this.addElement)
+      const element = this.elementFromNode(node)
+      if (element && this.elementIsActive(element)) {
+        this.processTree(element, this.addElement)
+      }
     }
   }
 
@@ -110,12 +116,9 @@ export class ElementObserver {
     return this.delegate.matchElementsInTree(tree)
   }
 
-  private processNode(node: Node, processor: (element: Element) => void) {
-    const tree = this.elementFromNode(node)
-    if (tree) {
-      for (const element of this.matchElementsInTree(tree)) {
-        processor.call(this, element)
-      }
+  private processTree(tree: Element, processor: (element: Element) => void) {
+    for (const element of this.matchElementsInTree(tree)) {
+      processor.call(this, element)
     }
   }
 
@@ -125,13 +128,23 @@ export class ElementObserver {
     }
   }
 
+  private elementIsActive(element: Element): boolean {
+    if (element.isConnected != this.element.isConnected) {
+      return false
+    } else {
+      return this.element.contains(element)
+    }
+  }
+
   // Element tracking
 
   private addElement(element: Element) {
     if (!this.elements.has(element)) {
-      this.elements.add(element)
-      if (this.delegate.elementMatched) {
-        this.delegate.elementMatched(element)
+      if (this.elementIsActive(element)) {
+        this.elements.add(element)
+        if (this.delegate.elementMatched) {
+          this.delegate.elementMatched(element)
+        }
       }
     }
   }

packages/@stimulus/mutation-observers/test/cases/attribute_observer_tests.ts

@@ -68,6 +68,32 @@ export default class AttributeObserverTests extends ObserverTestCase implements
     ])
   }
 
+  async "test ignores synchronously disconnected elements"() {
+    const { innerElement, outerElement } = this
+
+    outerElement.removeChild(innerElement)
+    innerElement.setAttribute(this.attributeName, "")
+    await this.nextFrame
+
+    this.assert.deepEqual(this.calls, [
+      ["elementMatchedAttribute", outerElement, this.attributeName]
+    ])
+  }
+
+  async "test ignores synchronously moved elements"() {
+    const { innerElement, outerElement } = this
+
+    document.body.appendChild(innerElement)
+    innerElement.setAttribute(this.attributeName, "")
+    await this.nextFrame
+
+    this.assert.deepEqual(this.calls, [
+      ["elementMatchedAttribute", outerElement, this.attributeName]
+    ])
+
+    document.body.removeChild(innerElement)
+  }
+
   get outerElement() {
     return this.findElement("#outer")
   }

yarn.lock

@@ -5626,9 +5626,9 @@ [email protected]:
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.2.tgz#2d615a1ef4aee4f574425cdff7026edf81919836"
 
-typescript@^2.8.1:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.8.1.tgz#6160e4f8f195d5ba81d4876f9c0cc1fbc0820624"
+typescript@^2.8.4:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.9.1.tgz#fdb19d2c67a15d11995fd15640e373e09ab09961"
 
 uglify-es@^3.3.7:
   version "3.3.9"