krescruz / angular-materialize

Angularjs directives for Materialize CSS Framework https://github.com/Dogfalo/materialize
MIT License
397 stars 129 forks source link

date picker and time picker not editable in chrome #233

Open gallaszlo opened 5 years ago

gallaszlo commented 5 years ago

In chrome if the input date contains any data and you click to edit, the date picker shown up but it closes automatically and you can't change the value, On your demo page you can test it: https://krescruz.github.io/angular-materialize/#input-date

danswater commented 5 years ago

same issue, since angular materialize is dependent of materialize lib https://github.com/Dogfalo/materialize/issues/6312

anfho93 commented 5 years ago

I have the same issue

rupesh9 commented 5 years ago

+1

akshayrao14 commented 5 years ago

+1 The calendar stays until the mouse click is lifted. If I keep the mouse clicked, it stays, but that doesn't help much.

ersonukr commented 5 years ago

+1

webbiesdk commented 5 years ago

It seems the bug is in the pickadate plugin included in Materialize and/or Chrome

It might fix the issue to simply include the latest version of pickadate on top of Materialize (https://amsul.ca/pickadate.js/), I have not tested this.

But I don't think we should do anything here before the Materialize issue has been closed.

There are some temp solutions in the issues linked above, you can use those for now.

If someone finds a way to fix the issue in this code-base, then pull-requests are welcome.

webbiesdk commented 5 years ago

Also: I can't seem to replicate the issue on my machine, so it would be hard for me to fix it.

anfho93 commented 5 years ago

The version of chrome affected is 73 i solved by changing and adding some timeouts in materialize and materialize.clokpicker.js files

El mar., 2 abr. 2019 a las 8:47, webbiesdk (notifications@github.com) escribió:

Also: I can't seem to replicate the issue on my machine, so it would be hard for me to fix it.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/krescruz/angular-materialize/issues/233#issuecomment-479003562, or mute the thread https://github.com/notifications/unsubscribe-auth/ACTugqBf28BlCZROjYemWj_V-Awy3dc2ks5vc19vgaJpZM4cQ_W9 .

--

Andrés Felipe Herrera Ingeniero de Sistemas y Computación. Administrador de Infraestructura Tecnológica en SmartenIT Docente de la Universidad del Quindío

preeti-sharmaAvanti commented 5 years ago

I also have the same issue.

amandadianni commented 5 years ago

I followed the suggestion on this stackoverflow's post and it worked for me: https://stackoverflow.com/questions/55200244/materialize-date-picker-automatic

EDIT Since the answer is not accepted in stackoverflow yet, I'm posting here: $('.datepicker').on('mousedown', function(event) { event.preventDefault(); });

akshayrao14 commented 5 years ago

@amandadianni thanks!

rupesh9 commented 5 years ago

Thank You @amandadianni. The solution given on the link given by @amandadianni works for me after a small change. I changed the class "datepicker" to "picker__input".

$(document).on('mousedown', '.picker__input', function(event){
  event.preventDefault();
})
gallaszlo commented 5 years ago

Thanks. If you use timepicker too, you have to use the following: $(document).on('mousedown', '.timepicker', function(event){ event.preventDefault(); })