Merge pull request #4985 from Polymer/event-order

Apply `listeners` in constructor rather than `ready`

lib/legacy/legacy-element-mixin.html

@@ -81,6 +81,11 @@
         /** @type {Object<string, Function>} */
         this._debouncers;
         this.created();
+        // Ensure listeners are applied immediately so that they are
+        // added before declarative event listeners. This allows an element to
+        // decorate itself via an event prior to any declarative listeners
+        // seeing the event. Note, this ensures compatibility with 1.x ordering.
+        this._applyListeners();
       }
 
       /**
@@ -180,7 +185,6 @@
        */
       ready() {
         this._ensureAttributes();
-        this._applyListeners();
         super.ready();
       }
 

lib/utils/gestures.html

@@ -579,7 +579,13 @@
      */
     setTouchAction: function(node, value) {
       if (HAS_NATIVE_TA) {
-        node.style.touchAction = value;
+        // NOTE: add touchAction async so that events can be added in
+        // custom element constructors. Otherwise we run afoul of custom
+        // elements restriction against settings attributes (style) in the
+        // constructor.
+        Polymer.Async.microTask.run(() => {
+          node.style.touchAction = value;
+        });
       }
       node[TOUCH_ACTION] = value;
     },

test/unit/events-elements.html

@@ -17,6 +17,8 @@
       this._removed = [];
     },
     handle: function(e) {
+      const order = e._handleOrder = e._handleOrder || [];
+      order.push(this.localName);
       this._handled[e.currentTarget.localName] = e.type;
     },
     unlisten: function(node, eventName, handler) {
@@ -51,6 +53,18 @@
   </script>
 </dom-module>
 
+<dom-module id="x-order">
+    <template>
+      <x-listeners id="inner" on-foo="handle"></x-listeners>
+    </template>
+    <script>
+      Polymer({
+        is: 'x-order',
+        behaviors: [EventLoggerImpl]
+      });
+    </script>
+  </dom-module>
+
 <dom-module id="x-dynamic">
   <template>
     <div id="inner"></div>

test/unit/events.html

@@ -78,6 +78,23 @@
 
       });
 
+      suite('listeners + on-*', function() {
+        suiteSetup(function() {
+          el = document.createElement('x-order');
+          document.body.appendChild(el);
+        });
+
+        suiteTeardown(function() {
+          document.body.removeChild(el);
+        });
+
+        test('listeners handled before on-* events', function() {
+          const e = el.$.inner.fire('foo', {});
+          assert.deepEqual(e._handleOrder, ['x-listeners', 'x-order']);
+        });
+
+      });
+
       suite('dynamic', function() {
 
         var options;