fix: do not prevent touchend for clear button

src/vaadin-date-picker-mixin.html

@@ -316,24 +316,31 @@
       this._boundFocus = this._focus.bind(this);
       this._boundUpdateAlignmentAndPosition = this._updateAlignmentAndPosition.bind(this);
 
+      const isClearButton = e => {
+        const path = e.composedPath();
+        const inputIndex = path.indexOf(this._inputElement);
+        return path.slice(0, inputIndex)
+          .filter(el => el.getAttribute && el.getAttribute('part') === 'clear-button')
+          .length === 1;
+      };
+
       Polymer.Gestures.addListener(this, 'tap', e => {
         // FIXME(platosha): use preventDefault in the text field clear button,
         // then the following composedPath check could be simplified down
         // to `if (!e.defaultPrevented)`.
         // https://github.com/vaadin/vaadin-text-field/issues/352
-        const inputIndex = e.composedPath().indexOf(this._inputElement);
-        if (
-          e.composedPath().slice(0, inputIndex)
-            .filter(el => el.getAttribute && el.getAttribute('part') === 'clear-button')
-            .length === 0
-        ) {
-          this.open();
-        } else {
+        if (isClearButton(e)) {
           this.validate();
+        } else {
+          this.open();
         }
       });
 
-      this.addEventListener('touchend', this._preventDefault.bind(this));
+      this.addEventListener('touchend', e => {
+        if (!isClearButton(e)) {
+          e.preventDefault();
+        }
+      });
       this.addEventListener('keydown', this._onKeydown.bind(this));
       this.addEventListener('input', this._onUserInput.bind(this));
       this.addEventListener('focus', e => this._noInput && e.target.blur());

test/basic.html

@@ -664,6 +664,13 @@
         expect(datepicker.value).to.equal('');
       });
 
+      it('should not prevent touchend event on clear button', () => {
+        datepicker.value = '2000-02-01';
+        const e = new CustomEvent('touchend', {cancelable: true});
+        clearButton.dispatchEvent(e);
+        expect(e.defaultPrevented).to.be.false;
+      });
+
       it('should validate on clear', () => {
         datepicker.required = true;
         datepicker.value = '1991-20-12';