Menu TypeError: undefined is not an object (evaluating 'str.split')

On Safari (Mac), and Chrome on Linux when opening a menu with dynamic items the menu does not complete it's animation and throws:

    [Error] TypeError: undefined is not an object (evaluating 'str.split')
    parseMaxTime (angular-material.js, line 5000)
    computeTimings (angular-material.js, line 4975)
    (anonymous function) (angular-material.js, line 4878)
    (anonymous function) (angular-material.js, line 5030)

When running the debugger, the problem starts in computeTimings(element) function: https://github.com/angular/material/blob/a5d84c372f87e96469f6c7d72d42d0aea83fe8fd/src/core/util/animation/animateCss.js#L293

// angular-material.js L5097
var adr = parseMaxTime(cs[prop('animationDuration')]);

no animationDuration property is available, so when parseMaxTime runs it bombs out: https://github.com/angular/material/blob/a5d84c372f87e96469f6c7d72d42d0aea83fe8fd/src/core/util/animation/animateCss.js#L318

// angular-material.js L5122
var values = str.split(/\s*,\s*/); //str = undefined

This results in the entire screen blocked requiring a full page refresh. I tried adding ng-init with values as outlined here: https://github.com/angular/material/issues/4720, however it did not help. My menu is in a directive with a dynamic ng-repeat of elements. Everything works fine in Chrome and Firefox on Mac/Windows, only occurs on Safari/Mac and Chrome/Linux.

FIX

Wrapping an if (str) { ... } around https://github.com/angular/material/blob/a5d84c372f87e96469f6c7d72d42d0aea83fe8fd/src/core/util/animation/animateCss.js#L318-L327

Fixed the problem for me.

angular / material

Menu TypeError: undefined is not an object (evaluating 'str.split') #4752

FIX