Materialize Date Picker automatically hide after opening problem on chrome

Question

Materialize datepicker works fine in other browsers and old versions of Google Chrome but it doesn't work properly in new version of Google Chrome

<input type="date" class="datepicker">

JS

$('.datepicker').pickadate({

selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});

Codepen Link for Datepicker

On updating the chrome version to 73. This problem started occurring for me also. I can see this problem in the documentation of materialize too. — Divya Barsode, Mar 29 '19 at 10:38
Is this present in the latest version of Materialize or is it only a problem for <1.0 releases? — Adam Starrh, Jun 20 '19 at 21:11

score 27 · Answer 1 · edited Nov 09 '20 at 18:11

27

I had the same problem and solved like this way:

$('.datepicker').on('mousedown', function preventClosing(event) {
  event.preventDefault();
});

edited Nov 09 '20 at 18:11

thlik

401
6
12

answered Apr 01 '19 at 18:36

Nico JL

409
3
6

score 17 · Accepted Answer · answered Apr 23 '19 at 00:53

17

Solution for datepicker

$('.datepicker').on('mousedown',function(event){
    event.preventDefault();
})

Solution for selectbox

Delete this code in materialize.min.js

$(this).trigger('open', ['focus']);
or
a(this).trigger("open",["focus"]);

answered Apr 23 '19 at 00:53

Alperen Akti

309
2
10

datepicker works perfectly well. Solution for selectbox doesnot work for me. Made changes in materialize.js Anything else – aman_novice Apr 26 '19 at 19:16
Same, datepicker solution worked, drop down solution does not, maybe a slightly different version of materialize is the culprit. – David C May 01 '19 at 18:26
Found a fix for the drop downs, just comment out hideDropdown(); in the following code : setTimeout(function () { $(document).on('click.' + activates.attr('id'), function (e) { // hideDropdown(); $(document).off('click.' + activates.attr('id')); }); }, 0); – David C May 01 '19 at 19:11
@aman_novice did you fix your problem? Try my fix in the comment above if you're still having issues. – David C May 01 '19 at 20:05
@DavidC i used e.preventDefault() in the 'Click' event. It works. I still have issues with 'Select' fields. The dropdown doesnt appear. I use materialize in my meteor project and Materialize guys have not been pushing the latest code to Atmosphere since past 1.5 yrs or so. – aman_novice May 03 '19 at 20:41
Does this break anything on other browsers? – Adam Starrh Jun 20 '19 at 21:18
Both solutions not appropriate. Removing open focus, causes drop down to not focus on selected item when opened (not scollTo()). The other solution in comments to remove hideDropdown(); causes the issue where clicking outside dropdown needs to close the dropdown... Will post solution as i engineer one. – Valentin Rusk Aug 04 '20 at 17:57

score 1 · Answer 3 · answered Mar 17 '19 at 05:41

1

You should use the latest version of cdnjs, currently you were using 0.97.5, even older than the beta release.

 <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

JQuery:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

Datepicker:

HTML

<input type="text" class="datepicker">

JQuery

$('.datepicker').datepicker({
  selectMonths: true,
  selectYears: 15
});

The previous one was working for me, no idea why it wasn't in your case.

Check the latest Datepicker/Timepicker docs.

CodePen Working Demo

answered Mar 17 '19 at 05:41

Germa Vinsmoke

3,541
4
24
34

1

On updating the chrome version to 73. This problem started occurring for me also. I can see this problem in the documentation of materialize also. SInce the enitre application is made using the older version, I cannot use the new one. Any other solution? – Divya Barsode Mar 29 '19 at 10:34
What do you mean by problem in documentation? – Germa Vinsmoke Mar 29 '19 at 11:16
2

The same thing happens here http://archives.materializecss.com/0.100.2/forms.html after i updated chrome – Divya Barsode Apr 01 '19 at 11:22
@DivyaBarsode , I also use the previous version of materialize and I could not use this answer, but what served me was 'Nico JL' response. Adding the event.preventDefault (); to the mouseDown event – Luis Fernando Apr 03 '19 at 13:36
How do author suggests me to update materizalize css lib when we have it arrived from 3rd party and it is highly customized. The answer is completely not appropriate. I suppose, this thread is looking for solution to existing code base. – Valentin Rusk Aug 04 '20 at 18:06

faizan · Answer 4 · 2019-03-30T06:15:18.920

0

i have solved this by replacing the setTimeout() function in material.js.

setTimeout( function() {  
    if (giveFocus == true) {   
        P.$root.removeClass( CLASSES.opened + ' ' + CLASSES.focused )
        aria( P.$root[0], 'hidden', true )
    }
}, 0 )

you have to download the js file from cdn then in file search "P.$root.removeClass( CLASSES.opened + ' ' + CLASSES.focused )" after that replace the function with above code. enjoy :)

edited Mar 30 '19 at 06:15

answered Mar 30 '19 at 06:10

faizan

7
2

modify the above condition with this this condition (giveFocus == true || giveFocus == null) also – faizan Apr 08 '19 at 10:24
neither of above worked(for solving SELECT) in chrome 84. continue researching it as updating is not an option:( – Valentin Rusk Aug 04 '20 at 18:35

Valentin Rusk · Answer 5 · 2020-08-13T11:09:39.417

0

Chrome 84 select/dropdowns for materialize css 0.100 solutions:

Change the timeouts that call for hideDropdown() from 0 to 100ms. Nobody will notice it, but it will do the job as well :))

edited Aug 13 '20 at 11:09

answered Aug 04 '20 at 19:16

Valentin Rusk

630
5
13

score -1 · Answer 6 · edited May 25 '19 at 10:35

-1

Delete this from materialize.js

$(this).trigger('open', ['focus']);

or

a(this).trigger("open",["focus"]);

edited May 25 '19 at 10:35

Zoe

27,060
21
118
148

answered May 23 '19 at 09:57

Manish Mittal

207
2
10

Materialize Date Picker automatically hide after opening problem on chrome

6 Answers6

Solution for datepicker

Solution for selectbox