Prevent Polymer mouseCanceller for file input click. Fixes #277

vaadin · Aug 9, 2018 · f5b1670 · f5b1670
1 parent a9d847a
commit f5b1670
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/src/vaadin-upload.html b/src/vaadin-upload.html
@@ -5,6 +5,7 @@
 -->
 
 <link rel="import" href="../../polymer/polymer-element.html">
+<link rel="import" href="../../polymer/lib/utils/gestures.html">
 <link rel="import" href="../../polymer/lib/elements/dom-repeat.html">
 <link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
 <link rel="import" href="../../vaadin-button/src/vaadin-button.html">
@@ -740,9 +741,17 @@
         _onAddFilesTouchEnd(e) {
           // Cancel the event to avoid the following click event
           e.preventDefault();
+          // FIXME(platosha): workaround for Polymer Gestures mouseCanceller
+          // cancelling the following synthetic click. See also:
+          // https://github.com/Polymer/polymer/issues/5289
+          this.__resetMouseCanceller();
           this._onAddFilesClick();
         }
 
+        __resetMouseCanceller() {
+          Polymer.Gestures.resetMouseCanceller();
+        }
+
         _onAddFilesClick() {
           if (this.maxFilesReached) {
             return;

diff --git a/test/adding-files.html b/test/adding-files.html
@@ -66,6 +66,17 @@
             expect(e.defaultPrevented).to.be.true;
           });
 
+          it('should invoke Polymer.Getstures.resetMouseCanceller before open file dialog', () => {
+            // NOTE(platosha): With ES modules we can’t put a spy on the actual
+            // Polymer.Gestures.resetMouseCanceller. Have to use a separate
+            // wrapper method for testing.
+            const spy = sinon.spy(upload, '__resetMouseCanceller');
+
+            const e = new CustomEvent('touchend', {cancelable: true});
+            upload.$.addFiles.dispatchEvent(e);
+            expect(spy).to.be.calledOnce;
+          });
+
           it('should reset input.value before dialog', () => {
             const input = upload.$.fileInput;
             // jshint ignore:start