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?

There is a beta update to Materialize, I can't deploy it to my current live system as the changes would take days if not weeks as a lot has changed and it isnt a stable release... — doer123456789, Mar 13 '19 at 17:30
Any other suggestions would be greatly appreciated. The same functions are still working great on Edge browser (but soon they will use Chrome as its base...) — doer123456789, Mar 13 '19 at 17:40
"it flickers when you click on it and then disappears" Hope that helps... — doer123456789, Mar 18 '19 at 06:44
There's a detailed discussion going on for this topic https://github.com/amsul/pickadate.js/issues/1138 As a temporary fix I have the following changes [![enter image description here](https://i.stack.imgur.com/LehdZ.png)](https://i.stack.imgur.com/LehdZ.png) [![enter image description here](https://i.stack.imgur.com/Vbwfn.png)](https://i.stack.imgur.com/Vbwfn.png) [![enter image description here](https://i.stack.imgur.com/AeaXJ.png)](https://i.stack.imgur.com/AeaXJ.png) — Shashwat, Mar 15 '19 at 07:14
quick fix: 1.Find `popover.show();` then setTimeout 500ms. 2. Find `// Hide when clicking` setTimeout 500ms. This not work at the first click, But after first click it work. — Kanin Peanviriyakulkit, Mar 25 '19 at 04:29
@KaninPeanviriyakulkit The fix works well. Find this function `ClockPicker.prototype.show = function (e) {` Just wrap setTimeout( 200 ms) inside this whole function, works well. — Subash, Mar 25 '19 at 12:55

score 4 · Answer 1 · answered Mar 14 '19 at 21:25

4

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.

answered Mar 14 '19 at 21:25

Adriano

207
2
12

1

The DatePicker work perfectly, thanks! But the TimePicker not work.. I have tried this link: https://github.com/amsul/pickadate.js/commit/5cd051ca3534985c394c5d606ecca51e1ac0244e but not work. Any suggestions? – Ruben Mar 15 '19 at 11:20
The timepicker is a customized and older version and uses another script afaik. – Mar 18 '19 at 10:50
Try on line 8739 (were there is a comment "Show or toggle" of clockpicker) putting the input binding inside a setTimeout with a wait time of 200 ms. That should do the trick. – Adriano Mar 25 '19 at 12:45
@Adriano Another fix also works. Find this function `ClockPicker.prototype.show = function (e) {` Just wrap setTimeout( 200 ms) inside this whole function, works well – Subash Mar 25 '19 at 12:59
I just would like to address that I had to change the line `1768` on the first step. That solved my problem with the ` – Paulo H. Tokarski Glinski Apr 23 '19 at 00:21

score 3 · Answer 2 · answered Mar 16 '19 at 17:19

3

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.

answered Mar 16 '19 at 17:19

Hey, saw you dont know what error I am talking about, a bit wary to try something you suggest though. Seeming you want clarification..? – doer123456789 Mar 18 '19 at 06:45
I am one of the maintainers of pickadate and have worked on materialize in the past. See https://github.com/amsul/pickadate.js/issues/1138 and https://github.com/amsul/pickadate.js/issues/1139 – Mar 18 '19 at 10:49

score 1 · Answer 3 · edited Mar 28 '19 at 08:51

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();
      }
    });*/

score 1 · Answer 4 · answered May 23 '19 at 20:42

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

answered May 23 '19 at 20:42

HHIanElu RU

11
2

score 1 · Answer 5 · answered May 29 '19 at 19:44

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.

score 1 · Answer 6 · answered Jun 27 '19 at 23:25

1

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

answered Jun 27 '19 at 23:25

Lem

31
4

score 0 · Answer 7 · answered Apr 04 '19 at 08:42

0

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

answered Apr 04 '19 at 08:42

Paul de Berranger

1

score 0 · Answer 8 · answered Oct 04 '19 at 10:42

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

Chrome Update 73 - Materialize CSS JS trigger error

8 Answers8

Linked