md-select works only in first click on OS X

Question

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!

Soapbark

I'm assuming version 2+ of angular. Angular material still has some bugs, so it may be worth checking those on guthib. I imagine there is an error in the console (also available on electron), which should give more details about the error that you are seeing – Emlyn

Im still using the angularjs version as its the only one i have some skill at time and I have very little time to do this project. I checked the console and even if I click it several times, it doesnt show any error message. Inspecting html, i can see that, before the first click, md-select has a div with the options elements. That div disappear after the first click – Soapbark

Updated the question with some info of the elements – Soapbark

I think this question still needs more information. I don't currently have time to download the project unfortunately. – Emlyn

Also, I have forgotten a lot of v1, so will leave this one for someone else – Emlyn

Well thanks anyway. Ill keep working on other features in the project. If i can't fix it i will use a simple select – Soapbark

@JeanRobert can you provide the repository in terms of English , some of the folder names in your repo are not in english , its difficult to go through , or if you can tel us the page name, directive , where the issue is occuring, it would be helpfull for us – Roshan

@Webruster i have a view that is used in most of the routes, like a header with two md-selects. It's in controle-projeto/app/views/top-filter.html The controller is at controle-projeto/app/controllers/top-filter.controller.js. If you need more information im here to help you help me hehehe Thanks! – Soapbark

@JeanRobert I've just run your code, it seems to be working fine. What exactly the issue is? The md-select dropdowns opening & selecting values correctly (regardless of any OS platform). – Absa

@Absa only in OSX, i can use the md-select dropdown only once. When i click it a second time, it doesnt open the dropdown, even the other md-select stop working too – Soapbark

i'm on MacOS Sierra v10.12.5, using node v6.11.3 – Soapbark

I've created a simple server with nodejs express to host the angular app, and it runs perfectly on chrome and safari. It seems tu 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 delay to open and close, only running in electron. – Soapbark

Answer 1

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

Soapbark