Skip to content

Commit 5d7f90e

Browse files
SaulisKristian Nordman
authored and
Kristian Nordman
committed
Fix opening overlay with tap issue on touch devices
See Polymer/polymer#4670
1 parent fda5c31 commit 5d7f90e

4 files changed

+17
-8
lines changed

test/selecting-items.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@
237237

238238
it('should fire on clear', function() {
239239
combobox.value = 'foo';
240-
combobox.$.clearIcon.click();
240+
fire('up', combobox.$.clearIcon);
241241

242242
expect(changeSpy.callCount).to.equal(1);
243243
});
@@ -315,7 +315,7 @@
315315
it('should clear the selection when tapping on the icon', function() {
316316
combobox.open();
317317

318-
fire('tap', clearIcon);
318+
fire('up', clearIcon);
319319

320320
expect(combobox.value).to.eql('');
321321
expect(combobox.$.overlay._selectedItem).to.be.null;
@@ -325,7 +325,7 @@
325325
it('should close the dropdown after clearing a selection', function() {
326326
combobox.open();
327327

328-
fire('tap', clearIcon);
328+
fire('up', clearIcon);
329329

330330
expect(combobox.opened).to.eql(false);
331331
});

test/toggling-dropdown.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,15 @@
3939
}
4040

4141
function tapInput() {
42-
fire('tap', combobox.inputElement);
42+
// This listener should listen for "tap" again once composedPath() issues with touch devices
43+
// have been fixed. See https://github.com/Polymer/polymer/issues/4670
44+
fire('up', combobox.inputElement);
4345
}
4446

4547
function tapToggleIcon() {
46-
fire('tap', combobox.$$('paper-input-container #toggleIcon'));
48+
// This listener should listen for "tap" again once composedPath() issues with touch devices
49+
// have been fixed. See https://github.com/Polymer/polymer/issues/4670
50+
fire('up', combobox.$$('paper-input-container #toggleIcon'));
4751
}
4852

4953
function overlay() {

test/vaadin-combo-box-light.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,10 @@
8484
});
8585

8686
it('should toggle overlay by tapping toggle element', function() {
87-
comboBox._toggleElement.dispatchEvent(new CustomEvent('tap', {bubbles: true}));
87+
comboBox._toggleElement.dispatchEvent(new CustomEvent('up', {bubbles: true}));
8888
expect(comboBox.opened).to.be.true;
8989

90-
comboBox._toggleElement.dispatchEvent(new CustomEvent('tap', {bubbles: true}));
90+
comboBox._toggleElement.dispatchEvent(new CustomEvent('up', {bubbles: true}));
9191
expect(comboBox.opened).to.be.false;
9292
});
9393

vaadin-combo-box-mixin.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,10 @@
198198
this.addEventListener('vaadin-dropdown-closed', this._onClosed.bind(this));
199199
this.addEventListener('vaadin-dropdown-opened', this._onOpened.bind(this));
200200
this.addEventListener('keydown', this._onKeyDown.bind(this));
201-
this._addEventListenerToNode(this, 'tap', this._onTap.bind(this));
201+
202+
// This listener should listen for "tap" again once composedPath() issues with touch devices
203+
// have been fixed. See https://github.com/Polymer/polymer/issues/4670
204+
this._addEventListenerToNode(this, 'up', this._onTap.bind(this));
202205
}
203206

204207
_onBlur() {
@@ -218,6 +221,8 @@
218221
}
219222

220223
_onTap(e) {
224+
// prevent 'tap' from getting generated and closing the overlay etc.
225+
Polymer.Gestures.prevent('tap');
221226
this._closeOnBlurIsPrevented = true;
222227

223228
var path = e.composedPath();

0 commit comments

Comments
 (0)