materialize-clockpicker icon indicating copy to clipboard operation
materialize-clockpicker copied to clipboard

Chrome 73 mouseup disappear issue

Open warmwhisky opened this issue 5 years ago • 11 comments

When clicking the input with mousedown, the clock picker pops up but on mouseup it disappears.

warmwhisky avatar Mar 18 '19 05:03 warmwhisky

I'm having the same issue @warmwhisky. Did you figure it out how to solve it?

renan-taranto avatar Mar 24 '19 23:03 renan-taranto

same problem here. Did you find any workaround?

itsmanuelrc avatar Mar 27 '19 03:03 itsmanuelrc

The same, has anybody found a fix of the problem?

nullnullru avatar Mar 28 '19 09:03 nullnullru

I found these guys had the same issue in their docs with there implementation of the clock picker. They have fixed it, but I could not figure out what had been done. mdbootstrap/bootstrap-material-design

warmwhisky avatar Mar 28 '19 09:03 warmwhisky

I solved it by using an afterShow function like this:

afterShow: function() {
  setTimeout(() => {
    $(".collectTime .clockpicker").addClass('picker--opened')
    $(".collectTime .clockpicker").show();
  }, 50);
}

It's an ugly workaround but solved the issue. I did it before I found the probably related https://github.com/amsul/pickadate.js/issues/1138 which solved the same issue I had with the pickadate.

renan-taranto avatar Mar 29 '19 04:03 renan-taranto

Same problem here. Weird thing is that works fine if you use secondary mouse button.

nicomelchiori avatar Mar 30 '19 17:03 nicomelchiori

The same, Has anyone found a fix the problem?

dinhdu2704 avatar Apr 03 '19 02:04 dinhdu2704

kaideptrai1102, you can try the renan-teranto's solution, it works but looking not so good :) Anyway it's better than nothing.

nullnullru avatar Apr 04 '19 13:04 nullnullru

I found a solution to this problem, adding one more condition to the if () but clicking on the other side of the modality of the datepicker does not close the datepicker, only if the close button is added

if ( ! event.isSimulated && target != ELEMENT && target != document && event.which != 3 **&& event.which != 1** ) {
                // If the target was the holder that covers the screen,
                // keep the element focused to maintain tabindex.
                P.close( target === P.$holder[0] )
            }

FcoSuastegui avatar Apr 04 '19 16:04 FcoSuastegui

By somehow, I added target.classList.contains('picker__holder' ) to the condition if(), so now I can click outside to close datepicker, it's working perfectly fine :) if (target.classList.contains('picker__holder') && target != ELEMENT && target != document && event.which !== 3 ) { // If the target was the holder that covers the screen, // keep the element focused to maintain tabindex. P.close( target === P.$root.children()[0] ) }

For clocktime picker, You have to find this line 0===i.closest(e.popover.find(".picker__wrap")).length&&0===i.closest(e.input).length&&e.hide() And replace it to 0===i.closest(e.popover.find(".picker__wrap")).length&&0===i.closest(e.input).length&&i[0].classList.contains('picker__holder')&&e.hide()

dinhdu2704 avatar Apr 05 '19 01:04 dinhdu2704

This Is Working For Me... $('.datepicker').on('mousedown',function(event){ event.preventDefault(); })

vikasthriwe avatar Apr 21 '23 06:04 vikasthriwe