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 dis

Answer 1

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 2

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 3

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();

Answer 4

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 5

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

Answer 6

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.