TimePicker clockpicker popup closes immediately after open (on chrome v73)

[Panciz]

description

when the clockpicker pupop it's opened by clicking on the timepicker textfield it shows up and closes immediately.

The popup opens on onmousedown event but it closes onmouseup. If the right mouse button is not released the popup remains open.

The problem happens only when using the leftbutton, everything ok with the rigthbutton.

There is no problem when you open the popup programmatically using timepicker.open()

Step to replicate

the problem can be replicated also with the material demo page

https://gwtmaterialdesign.github.io/gwt-material-demo/#timepickers

platform

I can replicate the problem with chrome on windows 7 and windows 10:
Chrome Versione 73.0.3683.75 (Build ufficiale) (a 64 bit) Macos/ windos 7/windows 10

There is no problem:
Chrome Version 72.0.3626.121 (Official Build) (64-bit) on Macos
Firefix 66.0 (66-bit) on Windows_

I tired with gwt-material-addins package 2.1.1 and 2.0

[fzamagni]

I patched the bug modifying timepicker.js:

LolliClock.prototype.show = function () {
	// Hide when clicking or tabbing on any element except the clock, input
	$(document).on('click.lolliclock.' + this.id + ' focusin.lolliclock.' + this.id, function (e) {
		var target = $(e.target);
		if (target.closest(self.popover).length === 0 &&
			target.closest(self.input).length === 0) {
			// I commented this line
			//self.done();
		}
	});
}

I loose the feature to close the timepicker clicking outside the popover, but I can use it.

Hope to help to find the real solution.

[fzamagni]

The solution proposed here Dogfalo/materialize#6312 (comment) doesn't work for me, because the this reference is invalid.
Putting a reference to this outside che setTimeout() works:

ClockPicker.prototype.show = function (e) {

    var self = this; // I added this var to avoid scoping issues....

    setTimeout(function () {
      // Not show again
      if (self.isShown) {    //....and then use here
        return;
      }
      raiseCallback(self.options.beforeShow);   //....and here
      ...
      ...
     }, 200);
};

Forgive my naif solution, but I'm trying to understand the problem.

[kevzlou7979]

Yeah same patched I've made. Now the 2.2-SNAPSHOT has been changed, there was an issue with Chrome 73 regarding the Race condition with event binding and focus https://bugs.chromium.org/p/chromium/issues/detail?id=941910. But there are fixes available out there.

[washowasho]

Check the 2.3-SNAPSHOT for a working version as well.