angularjsmacoselectronangularjs-materialmd-select

md-select works only in first click on OS X


I'm using angularjs (1.x) and angular-material in an electron app. I have two md-selects in a view, and when I try to use it in windows everything works ok. But when I use it in OS X, the md-select stops working after the first click. I click it and it opens the list of items, but if I click the md-select again, it doesn't show the items list anymore. Worth noting that if I click in the first md-select, the second md-select stops working too.

Inspecting html, I can see that, md-select has two children elements: md-select-value and div(md-select-menu-container). After I click and select any item, the md-select-menu-container disappears. Maybe its related to the issue, BUT the second md-select still has a md-select-menu-container and I can't open it.

Even tried a simple md-select without any options and it still opens only at first click.

<md-select ng-model="vm.test">
</md-select>

Anyone has any idea why this is happening?

I would put my code here, but I think the bug is somewhere else in my project. Because if I try the md-selects in the demo page of angular material, it works as expected.

My project is in github, so anyone can try it: https://github.com/jradesenv/controle-projeto

UPDATE:

I've created a simple server with nodejs express to host the angular app, and it runs perfectly on chrome and safari. It seems to be a bug only with electron. I noticed that its not only the md-selects, but the md-dialogs and md-toast too have some weird delay to open and close, only running in electron.

Thanks!


Solution

  • I was using angular material 1.1.5 with this error. When i downgraded it to 1.1.0 i can see the mdSelects working as expected, but still got some other erros like delay in mdDialog close, delay to change tabs, etc. It's a bug with angular-material animations.

    For anyone with this problem, I'm still using angular-material 1.1.5 , but I've disabled all the animations only in Safari, and now its working as expected.

    I'm using this code to inject a specific css file and bootstrap angularjs, and in the specific css file I disable all animations:

    function boot() {
        if (/Safari/.test(navigator.userAgent)) {
            var head = document.head,
            style = document.createElement('link');
    
            style.type = 'text/css';
            style.rel = 'stylesheet';
            style.href = 'styles/disable-animations.css';
    
            head.appendChild(style);
        }
    
        window.onload = function () {
            angular.bootstrap(document, ['app']);
        };
    }
    

    //styles/disable-animations.css file

    * {
    transition: none!important;
    transition-duration: 0ms!important;
    transition-delay: 0ms!important;
    }