CODEWITHSUNDEEP
angularjsmacoselectronangularjs-materialmd-select
Jean Robert
Jean Robert

Reputation: 759

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!

Upvotes: 10

Views: 464

Answers (1)

Jean Robert
Jean Robert

Reputation: 759

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;
}

Upvotes: 0

Related Questions