Delay detached callback with the same strategy as attached callback

Keep ordering consistant Fixes #3531
Polymer · Mar 29, 2016 · 7a244fa · 7a244fa
1 parent e0bcda8
commit 7a244fa
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 5 deletions.
diff --git a/src/lib/base.html b/src/lib/base.html
@@ -50,10 +50,10 @@
     },
 
     /**
-     * As an optimization, when `Polymer.Settings.lazyRegister` is set to true 
-     * registration tasks are deferred until the first instance of the element 
+     * As an optimization, when `Polymer.Settings.lazyRegister` is set to true
+     * registration tasks are deferred until the first instance of the element
      * is created. If an element should not defer registration tasks until
-     * this time, `ensureRegisterFinished` may be called 
+     * this time, `ensureRegisterFinished` may be called
      * on the element's prototype.
      */
     ensureRegisterFinished: function() {
@@ -91,8 +91,12 @@
 
     // reserved for canonical behavior
     detachedCallback: function() {
-      this.isAttached = false;
-      this._doBehavior('detached'); // abstract
+      // NOTE: duplicate attachedCallback behavior
+      var self = this;
+      Polymer.RenderStatus.whenReady(function() {
+        self.isAttached = false;
+        self._doBehavior('detached'); // abstract
+      });
     },
 
     // reserved for canonical behavior

diff --git a/test/runner.html b/test/runner.html
@@ -79,6 +79,9 @@
       var idx = suites.indexOf('unit/polymer-dom-shadow.html');
       suites.splice(idx, 0, 'unit/polymer-dom-native-shadow.html');
     }
+    if (window.customElements || document.registerElement) {
+      suites.push('unit/attach-detach-timing.html');
+    }
     WCT.loadSuites(suites);
   </script>
 </body>

diff --git a/test/unit/attach-detach-timing.html b/test/unit/attach-detach-timing.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script>
+    window.WCT = {
+      // don't wait for HTML Imports to load
+      waitFor: function(cb) {
+        cb();
+      }
+    };
+    </script>
+    <script src="../../../web-component-tester/browser.js"></script>
+    <link rel="import" href="../../polymer.html">
+    <script>
+    Polymer({
+      is: 'attach-detach',
+      properties: {
+        stream: {
+          type: Array,
+          value: function(){ return []; }
+        }
+      },
+      attached: function() {
+        this.stream.push('attached');
+      },
+      detached: function() {
+        this.stream.push('detached');
+      }
+    });
+    </script>
+    <script>
+      function checkOrder(el) {
+        assert.equal(el.stream.join(' '), [
+          'attached',
+          'detached'
+        ].join(' '));
+      }
+    </script>
+  </head>
+  <body>
+    <attach-detach id="ad"></attach-detach>
+    <script>
+    var ad = document.getElementById('ad');
+    ad.remove();
+    var el = document.createElement('attach-detach');
+    document.body.appendChild(el);
+    el.remove();
+    test('attach() and detach() are correct for upgraded elements', function() {
+      checkOrder(ad);
+    });
+    test('attach() and detach() are correct for imperative elements', function() {
+      checkOrder(el);
+    });
+    test('attach() and detach() are correct for elements made after load', function() {
+      var e = document.createElement('attach-detach');
+      document.body.appendChild(e);
+      e.remove();
+      checkOrder(e);
+    });
+    </script>
+  </body>
+</html>