Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set pointer capture on pointerdown on picker input #1168

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Set pointer capture on pointerdown on picker input #1168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b34c990
Set pointer capture on pointerdown on picker input
NavidZ May 13, 2019
d5c9dde
Fix a test
NavidZ May 14, 2019
549c343
Fix a typo
NavidZ May 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 9 additions & 29 deletions lib/picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,7 @@ function PickerConstructor( ELEMENT, NAME, COMPONENT, OPTIONS ) {

// The state of the picker.
STATE = {
id: ELEMENT.id || 'P' + Math.abs( ~~(Math.random() * new Date()) ),
handlingOpen: false,
id: ELEMENT.id || 'P' + Math.abs( ~~(Math.random() * new Date()) )
},


Expand Down Expand Up @@ -268,18 +267,6 @@ function PickerConstructor( ELEMENT, NAME, COMPONENT, OPTIONS ) {

// Bind the document events.
$document.on( 'click.' + STATE.id + ' focusin.' + STATE.id, function( event ) {
// If the picker is currently midway through processing
// the opening sequence of events then don't handle clicks
// on any part of the DOM. This is caused by a bug in Chrome 73
// where a click event is being generated with the incorrect
// path in it.
// In short, if someone does a click that finishes after the
// new element is created then the path contains only the
// parent element and not the input element itself.
if (STATE.handlingOpen) {
return;
}

var target = getRealEventTarget( event, ELEMENT )

// If the target of the event is not the element, close the picker picker.
Expand Down Expand Up @@ -647,22 +634,15 @@ function PickerConstructor( ELEMENT, NAME, COMPONENT, OPTIONS ) {
event.preventDefault()
P.open()
}
)
).

// Mousedown handler to capture when the user starts interacting
// with the picker. This is used in working around a bug in Chrome 73.
.on('mousedown', function() {
STATE.handlingOpen = true;
var handler = function() {
// By default mouseup events are fired before a click event.
// By using a timeout we can force the mouseup to be handled
// after the corresponding click event is handled.
setTimeout(function() {
$(document).off('mouseup', handler);
STATE.handlingOpen = false;
}, 0);
};
$(document).on('mouseup', handler);
// Pointerdown handler to capture the rest of the pointer stream
// with the picker. This is used to prevent click generated by
// this pointer stream closing the popup as the click goes the
// common ancestor of down and up event targets.
on('pointerdown', function(event) {
if (event.target.setPointerCapture)
event.target.setPointerCapture(event.originalEvent.pointerId);
});


Expand Down
7 changes: 4 additions & 3 deletions tests/units/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,9 +448,10 @@ test( 'Open and close', function() {
})

asyncTest( 'Open with a slower click', function() {
// This test ensures that behaviour in chrome as described in PR 1145
// This test ensures that behaviour in chrome as described in PR 1167
// https://github.com/amsul/pickadate.js/pull/1145
// is handled correctly
// is handled correctly where the pointer stream is captured to the
// picker input.

var picker = this.picker

Expand All @@ -471,7 +472,7 @@ asyncTest( 'Open with a slower click', function() {
picker.$node.trigger({
type: 'mouseup'
})
$DOM.trigger({
picker.$node.trigger({
type: 'click'
})
setTimeout(function () {
Expand Down