I'm using angularjs (1.x) and angular-material in an electron app. I have two md-select
s 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-select
s 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!
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;
}