Chrome Update 73 - Materialize CSS JS trigger error

Question

After the latest Chrome Update 73, the date pickers, time pickers and dropdowns for Materialize CSS 0.100.2 isn't working anymore, it flickers when you click on it and then disappears.

Any idea how to fix this?

Answer 1

I had the same issue. For now I made some changes to make it work (this is just a temp hot fix for me).

On materialize.js (materialize-v0.100.2 not the min one):

1) On line 1786 there is a setTimeout (with comment "Add click close handler to document") that has a wait value of 0, change it to 100.

2) On line 6558 there is a binding to the click outside the datepicker element. (with comment "Bind the document events".) Put all this binding inside a setTimeout with a wait time of 500 ms.

Fix 1 is for the selects, the second one is for the datepicker.

Answer 2

This is a regression in Chrome 73. We have released pickadate 3.6.1 which should resolve this.

See https://bugs.chromium.org/p/chromium/issues/detail?id=941910 for the regression in Chrome.

Answer 3

para timepicker comentar los siguiente en materialize.js

/** Hide when clicking or tabbing on any element except the clock and input
    $doc.on('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id, function (e) {
      var target = $(e.target);
      if (target.closest(self.popover.find('.picker__wrap')).length === 0 && target.closest(self.input).length === 0) {
        self.hide();
      }
    });*/

Answer 4

I found a fix for this in chrome, you just have to use this Example: $("#dtFrom").off("focus") if the page is slow you will need to put inside setTimeout and that´s all

Answer 5

For those who are too lazy to tweak the materialize.js yourself. I have added a default timeout of 500ms (which I think works consistently). This works with both the date and time pickers.

materialize.js

Answer 6

The solution is to filter the target with the parent: if ( target != ELEMENT && target != document && target != P.$root.parent()[0] && event.which != 3 )

Answer 7

I had the same problem. Although I am using angular2-materialize, I believe this should work for people using materialize directly.

The solution that worked for me was to wrap the materialize select input with a div that has a click listener that simply calls event.stopPropagation():

<div (click)="$event.stopPropagation()">
    <select materialize="material_select" [value]="selectValue" formControlName="someControl">
    // options omitted (not relevant to answer)
    </select>
</div>

I hope this helps some people.

Answer 8

Based on Armando answer(the only one that worked for me) I made a javascript function using JQuery for non angular projects:

function refreshSelects(){
    $('select').material_select('destroy');
    $('select').each(function(){
        $(this).parent().attr("onclick","event.stopPropagation();");
    });
    $('select').material_select();  
}

Then, when I must initialize or refresh selectors content I just have to call the function

refreshSelects();