Skip to content

Commit 170cf8c

Browse files
manucorporatadamdbradley
authored andcommitted
fix(picker): safari fired pointerEnd() twice (#6708)
closes #6704
1 parent 6e3859a commit 170cf8c

File tree

1 file changed

+43
-42
lines changed

1 file changed

+43
-42
lines changed

src/components/picker/picker.ts

Lines changed: 43 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export class Picker extends ViewController {
103103
'(touchend)': 'pointerEnd($event)',
104104
'(mousedown)': 'pointerStart($event)',
105105
'(mousemove)': 'pointerMove($event)',
106-
'(body:mouseup)': 'pointerEnd($event)',
106+
'(body:mouseup)': 'pointerEnd($event)'
107107
}
108108
})
109109
class PickerColumnCmp {
@@ -122,6 +122,8 @@ class PickerColumnCmp {
122122
maxY: number;
123123
rotateFactor: number;
124124
lastIndex: number;
125+
receivingEvents: boolean = false;
126+
125127
@Output() ionChange: EventEmitter<any> = new EventEmitter();
126128

127129
constructor(config: Config, private _sanitizer: DomSanitizationService) {
@@ -156,22 +158,18 @@ class PickerColumnCmp {
156158
this.startY = pointerCoord(ev).y;
157159

158160
// reset everything
161+
this.receivingEvents = true;
159162
this.velocity = 0;
160163
this.pos.length = 0;
161164
this.pos.push(this.startY, Date.now());
162165

163-
let minY = this.col.options.length - 1;
166+
let minY = (this.col.options.length - 1);
164167
let maxY = 0;
165168

166169
for (var i = 0; i < this.col.options.length; i++) {
167-
if (this.col.options[i].disabled) {
168-
continue;
169-
}
170-
if (i < minY) {
171-
minY = i;
172-
}
173-
if (i > maxY) {
174-
maxY = i;
170+
if (!this.col.options[i].disabled) {
171+
minY = Math.min(minY, i);
172+
maxY = Math.max(maxY, i);
175173
}
176174
}
177175

@@ -183,40 +181,46 @@ class PickerColumnCmp {
183181
ev.preventDefault();
184182
ev.stopPropagation();
185183

186-
if (this.startY !== null) {
187-
if (this.isPrevented(ev)) {
188-
return;
189-
}
184+
if (this.startY === null) {
185+
return;
186+
}
190187

191-
var currentY = pointerCoord(ev).y;
192-
this.pos.push(currentY, Date.now());
188+
if (this.isPrevented(ev)) {
189+
return;
190+
}
193191

194-
// update the scroll position relative to pointer start position
195-
var y = this.y + (currentY - this.startY);
192+
var currentY = pointerCoord(ev).y;
193+
this.pos.push(currentY, Date.now());
196194

197-
if (y > this.minY) {
198-
// scrolling up higher than scroll area
199-
y = Math.pow(y, 0.8);
200-
this.bounceFrom = y;
195+
// update the scroll position relative to pointer start position
196+
var y = this.y + (currentY - this.startY);
201197

202-
} else if (y < this.maxY) {
203-
// scrolling down below scroll area
204-
y += Math.pow(this.maxY - y, 0.9);
205-
this.bounceFrom = y;
198+
if (y > this.minY) {
199+
// scrolling up higher than scroll area
200+
y = Math.pow(y, 0.8);
201+
this.bounceFrom = y;
206202

207-
} else {
208-
this.bounceFrom = 0;
209-
}
203+
} else if (y < this.maxY) {
204+
// scrolling down below scroll area
205+
y += Math.pow(this.maxY - y, 0.9);
206+
this.bounceFrom = y;
210207

211-
this.update(y, 0, false, false);
208+
} else {
209+
this.bounceFrom = 0;
212210
}
211+
212+
this.update(y, 0, false, false);
213213
}
214214

215215
pointerEnd(ev) {
216216
if (this.isPrevented(ev)) {
217217
return;
218218
}
219219

220+
if (!this.receivingEvents) {
221+
return;
222+
}
223+
this.receivingEvents = false;
220224
this.velocity = 0;
221225

222226
if (this.bounceFrom > 0) {
@@ -392,14 +396,9 @@ class PickerColumnCmp {
392396
let max = 0;
393397

394398
for (var i = 0; i < this.col.options.length; i++) {
395-
var opt = this.col.options[i];
396-
if (!opt.disabled) {
397-
if (i < min) {
398-
min = i;
399-
}
400-
if (i > max) {
401-
max = i;
402-
}
399+
if (!this.col.options[i].disabled) {
400+
min = Math.min(min, i);
401+
max = Math.max(max, i);
403402
}
404403
}
405404

@@ -411,18 +410,20 @@ class PickerColumnCmp {
411410
}
412411
}
413412

414-
isPrevented(ev) {
413+
isPrevented(ev): boolean {
414+
let now = Date.now();
415415
if (ev.type.indexOf('touch') > -1) {
416416
// this is a touch event, so prevent mouse events for a while
417-
this.msPrv = Date.now() + 2000;
417+
this.msPrv = now + 2000;
418418

419-
} else if (this.msPrv > Date.now() && ev.type.indexOf('mouse') > -1) {
419+
} else if (this.msPrv > now && ev.type.indexOf('mouse') > -1) {
420420
// this is a mouse event, and a touch event already happend recently
421421
// prevent the calling method from continuing
422422
ev.preventDefault();
423423
ev.stopPropagation();
424424
return true;
425425
}
426+
return false;
426427
}
427428

428429
}
@@ -445,7 +446,7 @@ class PickerColumnCmp {
445446
'</div>' +
446447
'<div class="picker-columns">' +
447448
'<div class="picker-above-highlight"></div>' +
448-
'<div *ngFor="let c of d.columns" [col]="c" class="picker-col"> (ionChange)="_colChange($event)"</div>' +
449+
'<div *ngFor="let c of d.columns" [col]="c" class="picker-col" (ionChange)="_colChange($event)"></div>' +
449450
'<div class="picker-below-highlight"></div>' +
450451
'</div>' +
451452
'</div>',

0 commit comments

Comments
 (0)