mdMenu: menu not closing on firefox 39 and chrome #3773

KReden · 2015-07-16T19:51:33Z

Reference Issue: #3438

This was reported as fixed in master several days ago but as of right now on FF and chrome it is broken again.

When the menu opens it seems to kill all input for the page. A refresh is needed to recover

ThomasBurleson · 2015-07-17T03:51:46Z

@KReden - I am unable to reproduce this with the latest code in master:
https://material.angularjs.org/HEAD/#/demo/material.components.menu.

FF and Chrome both open and close as expected.

KReden · 2015-07-24T16:41:00Z

@ThomasBurleson I updated to 0.10.1-rc3 and I am still getting this bug. I thought it might be something on my end interfering with how mdMenu worked but I can get it to happen on the Angular Material website as well. While trouble shooting I noticed that when the bug happens md-clickable is not applied to the div containing the menu. See screenshots below:

When working:

When not working:

This also applies to android:

clshortfuse · 2015-07-27T16:59:12Z

@KReden see #3899

It fixes the issue but won't be committed since there's a new animation system being written.

@include

… transitionEnd events. replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4. $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd() use animateCss.js polyfill for 'material.animate' module - add mock `createMockStyleSheet` for animateCss tests refactors to menu-interim-element.js and select.js - refactor logic and patterns used - use $animateCss in place of waitTransitionEnd() debounce Select and Menu window resize handlers Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select select async demo no longer clears users list when reloading select demos use `md-input-container { margin-right: 10px;}` hide Select Backdrop with zero duration enable full click detection in select-value area by using background color (with zero alpa). BREAKING-CHANGES: select and backdrop styles added * select list text is not selectable, * select backdrop hide duration is 0ms * select text value background has zero alpha ```scss .md-text { @include not-selectable(); } .md-select-value { background-color: rgba(0,0,0,0); } md-backdrop { &.md-select-backdrop { transition-duration: 0ms; } } ``` Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.

@include

… transitionEnd events. replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4. $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd() use animateCss.js polyfill for 'material.animate' module - add mock `createMockStyleSheet` for animateCss tests refactors to menu-interim-element.js and select.js - refactor logic and patterns used - use $animateCss in place of waitTransitionEnd() debounce Select and Menu window resize handlers Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select select async demo no longer clears users list when reloading select demos use `md-input-container { margin-right: 10px;}` hide Select Backdrop with zero duration enable full click detection in select-value area by using background color (with zero alpa). BREAKING-CHANGES: select and backdrop styles added * select list text is not selectable, * select backdrop hide duration is 0ms * select text value background has zero alpha ```scss .md-text { @include not-selectable(); } .md-select-value { background-color: rgba(0,0,0,0); } md-backdrop { &.md-select-backdrop { transition-duration: 0ms; } } ``` Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.

@include

… transitionEnd events. replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4. $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd() use animateCss.js polyfill for 'material.animate' module - add mock `createMockStyleSheet` for animateCss tests refactors to menu-interim-element.js and select.js - refactor logic and patterns used - use $animateCss in place of waitTransitionEnd() debounce Select and Menu window resize handlers Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select select async demo no longer clears users list when reloading select demos use `md-input-container { margin-right: 10px;}` hide Select Backdrop with zero duration enable full click detection in select-value area by using background color (with zero alpa). BREAKING-CHANGES: select and backdrop styles added * select list text is not selectable, * select backdrop hide duration is 0ms * select text value background has zero alpha ```scss .md-text { @include not-selectable(); } .md-select-value { background-color: rgba(0,0,0,0); } md-backdrop { &.md-select-backdrop { transition-duration: 0ms; } } ``` Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.

@include

replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4. $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd() use animateCss.js polyfill for 'material.animate' module - add mock `createMockStyleSheet` for animateCss tests refactors to menu-interim-element.js and select.js - refactor logic and patterns used - use $animateCss in place of waitTransitionEnd() debounce Select and Menu window resize handlers Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select select async demo no longer clears users list when reloading select demos use `md-input-container { margin-right: 10px;}` hide Select Backdrop with zero duration enable full click detection in select-value area by using background color (with zero alpa). BREAKING-CHANGES: select and backdrop styles added * select list text is not selectable, * select backdrop hide duration is 0ms * select text value background has zero alpha ```scss .md-text { @include not-selectable(); } .md-select-value { background-color: rgba(0,0,0,0); } md-backdrop { &.md-select-backdrop { transition-duration: 0ms; } } ``` Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.

@include

replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4. $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd() use animateCss.js polyfill for 'material.animate' module - add mock `createMockStyleSheet` for animateCss tests refactors to menu-interim-element.js and select.js - refactor logic and patterns used - use $animateCss in place of waitTransitionEnd() debounce Select and Menu window resize handlers Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select select async demo no longer clears users list when reloading select demos use `md-input-container { margin-right: 10px;}` hide Select Backdrop with zero duration enable full click detection in select-value area by using background color (with zero alpa). BREAKING-CHANGES: select and backdrop styles added * select list text is not selectable, * select backdrop hide duration is 0ms * select text value background has zero alpha ```scss .md-text { @include not-selectable(); } .md-select-value { background-color: rgba(0,0,0,0); } md-backdrop { &.md-select-backdrop { transition-duration: 0ms; } } ``` Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.

@include

… transitionEnd events. replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4. $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd() use animateCss.js polyfill for 'material.animate' module - add mock `createMockStyleSheet` for animateCss tests refactors to menu-interim-element.js and select.js - refactor logic and patterns used - use $animateCss in place of waitTransitionEnd() debounce Select and Menu window resize handlers Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select select async demo no longer clears users list when reloading select demos use `md-input-container { margin-right: 10px;}` hide Select Backdrop with zero duration enable full click detection in select-value area by using background color (with zero alpa). BREAKING-CHANGES: select and backdrop styles added * select list text is not selectable, * select backdrop hide duration is 0ms * select text value background has zero alpha ```scss .md-text { @include not-selectable(); } .md-select-value { background-color: rgba(0,0,0,0); } md-backdrop { &.md-select-backdrop { transition-duration: 0ms; } } ``` Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.

@include

replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4. $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd() use animateCss.js polyfill for 'material.animate' module - add mock `createMockStyleSheet` for animateCss tests refactors to menu-interim-element.js and select.js - refactor logic and patterns used - use $animateCss in place of waitTransitionEnd() debounce Select and Menu window resize handlers Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select select async demo no longer clears users list when reloading select demos use `md-input-container { margin-right: 10px;}` hide Select Backdrop with zero duration enable full click detection in select-value area by using background color (with zero alpa). BREAKING-CHANGES: select and backdrop styles added * select list text is not selectable, * select backdrop hide duration is 0ms * select text value background has zero alpha ```scss .md-text { @include not-selectable(); } .md-select-value { background-color: rgba(0,0,0,0); } md-backdrop { &.md-select-backdrop { transition-duration: 0ms; } } ``` Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.

@include

… transitionEnd events. replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4. $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd() use animateCss.js polyfill for 'material.animate' module - add mock `createMockStyleSheet` for animateCss tests refactors to menu-interim-element.js and select.js - refactor logic and patterns used - use $animateCss in place of waitTransitionEnd() debounce Select and Menu window resize handlers Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select - disable scroll before creating the backdrop select async demo no longer clears users list when reloading select demos use `md-input-container { margin-right: 10px;}` hide Select Backdrop with zero duration enable full click detection in select-value area by using background color (with zero alpa). update use of $$rAF and $timeout in Jasmine tests use $animateCss to animate the dropdown leave. Jasmine tests disable animation transitions for Toast and Select BREAKING-CHANGES: select and backdrop styles added * select list text is not selectable, * select backdrop hide duration is 0ms * select text value background has zero alpha ```scss .md-text { @include not-selectable(); } .md-select-value { background-color: rgba(0,0,0,0); } md-backdrop { &.md-select-backdrop { transition-duration: 0ms; } } ``` Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.

@include

… transitionEnd events. replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4. * $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd() * use animateCss.js polyfill for 'material.animate' module * add mock `createMockStyleSheet` for animateCss tests * refactors to menu-interim-element.js and select.js * refactor logic and patterns used * use $animateCss in place of waitTransitionEnd() * debounce Select and Menu window resize handlers * Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select * disable scroll before creating the backdrop * select async demo no longer clears users list when reloading * select demos use `md-input-container { margin-right: 10px;}` * hide Select Backdrop with zero duration * enable full click detection in select-value area by using background color (with zero alpa). * update use of $$rAF and $timeout in Jasmine tests * use $animateCss to animate the dropdown leave. * Jasmine tests disable animation transitions for Toast and Select BREAKING-CHANGES: select and backdrop styles added * select list text is not selectable, * select backdrop hide duration is 0ms * select text value background has zero alpha ```scss .md-text { @include not-selectable(); } .md-select-value { background-color: rgba(0,0,0,0); } md-backdrop { &.md-select-backdrop { transition-duration: 0ms; } } ``` Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.

@include

… transitionEnd events. replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4. * $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd() * use animateCss.js polyfill for 'material.animate' module * add mock `createMockStyleSheet` for animateCss tests * refactors to menu-interim-element.js and select.js * refactor logic and patterns used * use $animateCss in place of waitTransitionEnd() * debounce Select and Menu window resize handlers * Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select * disable scroll before creating the backdrop * select async demo no longer clears users list when reloading * select demos use `md-input-container { margin-right: 10px;}` * hide Select Backdrop with zero duration * enable full click detection in select-value area by using background color (with zero alpa). * update use of $$rAF and $timeout in Jasmine tests * use $animateCss to animate the dropdown leave. * Jasmine tests disable animation transitions for Toast and Select BREAKING-CHANGES: select and backdrop styles added * select list text is not selectable, * select backdrop hide duration is 0ms * select text value background has zero alpha ```scss .md-text { @include not-selectable(); } .md-select-value { background-color: rgba(0,0,0,0); } md-backdrop { &.md-select-backdrop { transition-duration: 0ms; } } ``` Fixes angular#3919. Fixes angular#3837. Fixes angular#3773, Fixes angular#3640. Fixes angular#3527. Fixes angular#3653. Closes angular#3949.

KReden changed the title ~~0.10.0, 0.10.1-rc2, Master: md-menu not closing on firefox 39~~ 0.10.1-rc2, Master: md-menu not closing on firefox 39 Jul 16, 2015

KReden changed the title ~~0.10.1-rc2, Master: md-menu not closing on firefox 39~~ 0.10.1-rc2, Master: md-menu not closing on firefox 39 and chrome Jul 16, 2015

ThomasBurleson closed this as completed Jul 17, 2015

ThomasBurleson added resolution: invalid resolution: can't reproduce The team is unable to reproduce this issue with the information provided and removed resolution: invalid labels Jul 17, 2015

KReden mentioned this issue Jul 27, 2015

mdMenu sometimes blocks the entire screen #3892

Closed

ThomasBurleson reopened this Jul 28, 2015

ThomasBurleson added hotlist: angular-issue hotlist: animations and removed resolution: can't reproduce The team is unable to reproduce this issue with the information provided labels Jul 28, 2015

ThomasBurleson added this to the 0.10.1 milestone Jul 28, 2015

ThomasBurleson self-assigned this Jul 28, 2015

ThomasBurleson changed the title ~~0.10.1-rc2, Master: md-menu not closing on firefox 39 and chrome~~ mdMenu: menu not closing on firefox 39 and chrome Jul 28, 2015

ThomasBurleson mentioned this issue Jul 29, 2015

fix(dialog, menu, select, interimElement): use $animateCss #3946

Closed

ThomasBurleson mentioned this issue Jul 29, 2015

fix(dialog, menu, select, interimElement): use $animateCss instead of transitionEnd events. #3949

Closed

ThomasBurleson modified the milestones: 0.10.1, 0.11.0 Jul 31, 2015

ThomasBurleson closed this as completed in d2a76c2 Aug 6, 2015

zombiezen mentioned this issue Aug 22, 2015

Can't click out of overflow menu. zombiezen/filedrop#1

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mdMenu: menu not closing on firefox 39 and chrome #3773

mdMenu: menu not closing on firefox 39 and chrome #3773

KReden commented Jul 16, 2015

ThomasBurleson commented Jul 17, 2015

KReden commented Jul 24, 2015

clshortfuse commented Jul 27, 2015

mdMenu: menu not closing on firefox 39 and chrome #3773

mdMenu: menu not closing on firefox 39 and chrome #3773

Comments

KReden commented Jul 16, 2015

ThomasBurleson commented Jul 17, 2015

KReden commented Jul 24, 2015

clshortfuse commented Jul 27, 2015