md-autocomplete: unable to click/focus on anything after a click on the "clear" button

[jgoux]

Steps to reproduce the bug :

• Go on https://material.angularjs.org/HEAD/#/demo/material.components.autocomplete
• On the first autocomplete, select something
• Click the "clear" button
• Now I can't click/focus on anything on the page

I'm on the master and my browser is Chrome v43

[DrDanRyan]

This issue also occurs if you select an item, and then backspace to delete the input to an empty state and then click away

[kschwidder]

+1 This is a major bug which blocks sites. Please provide a fix if possible.

[tolemac]

+1

[sonya-s]

+1

[GautierT]

+1 freezing the chrome tab.

[SimeonC]

To add to this - this seems to occur on the third consecutive click, if you use arrow keys + enter to select this doesn't occur.

If you click the autocomplete, click a selection, then click clear it locks up. I've recorded a video demonstrating here - http://screencast.com/t/NYkj14IYG9F

When we say "locks up" what is actually happening is that the <div class="md-scroll-mask"> is not being removed at some point and when you click the element it doesn't remove either.

[charliewynn]

in 0.10.0 I commented out line 12469 if angular-material defineProperty('hidden', handleHiddenChange, true);

and the function at 12642 handleHiddenChange (probably redundant to do the 2nd thing)

And it seems to be working for me.. Not sure what horrible thing I'm missing out on without the element 'hiding', but at least my app doesn't lock up :smile:

[vlad-lifliand]

+1

[gitawego]

same here.

[sricc]

+1

[mwymann]

+1

[patzick]

+1

temporary css workaround

.md-scroll-mask
    position: initial

[jozsi]

+1

[GuruM]

+1

[piyushchauhan2011]

:+1: serious issue mate, It really affected our website. Need a quick fix as soon as possible!

[robertmesserle]

This is resolved in master and will be fixed in 0.10.1

[GuruM]

Thanks @robertmesserle!

[tolemac]

Work fine here, thats ok!

[bdteo]

+1

[prerna12]

I am unable to resolve this issue with the 0.10.1-rc5 version available of angular material. Is it resolved?Please tell me what is the fix to get it working?

[ch4]

@prerna12 try 0.10.1. It was just released yesterday and seems to have fixed it for me.

[prerna12]

With 0.10.1, when I select an item in md-autocomplete and click on [x] next to it, that browser tab freezes. My observation is that when you type in autocomplete to filter items and do not select any item, first click on [x] hides the menu and next click on [x] clears the filter. Works fine! But when you select an item and click on [x], it hangs. So clearing when an item has been selected is still not working. Could you please relook into this and tell me if this scenario has been resolved in the latest fix.

[neutronz]

I'm still seeing this error on 0.11.0-master-3e34e02 using Chrome with the floating label autocomplete.

[jmcpeak]

+1

[elubin]

+1 still seeing as well

[ghost]

+1

[LeandroOrdonez]

+1 @neutronz same here

[LeandroOrdonez]

Maybe a temporary workaround:

angular.element('.md-scroll-mask').remove();
angular.element('body').attr('style', '');

[elubin]

@LeandroOrdonez agreed, that's what fixed it for us.

angular.element('.md-scroll-mask').remove();

[mzbyszynski]

I ran into this issue because I was using an md-autocomplete widget with md-min-length="0" to trigger a ngRoute view change (see #5213). My workaround was to temporarily change the md-min-length from 0 to 1 so that the auto-focus that happens when hitting the close button wouldn't trigger autocomplete's menu showing, which was adding the scroll mask.

I think you might also use $mdUtil.enableScrolling() to remove the scroll mask instead of interacting with the dom directly.

Hope that helps somebody!

[du6]

@LeandroOrdonez, if md-autocomplete is used inside md-dialog, the workaround solution will remove the dialog mask as well.

[LeandroOrdonez]

@du6 Yep you are right! I think the workaround provided by @mzbyszynski is quite more appropriate.

[truginis]

Was this ever fixed? This is happening to me when i reload route using ui.router. Completely locks out everything.

[du6]

@truginis, @LeandroOrdonez's workaround solution probably works for you. You can also wrap you function with $timeout.

[truginis]

@du6 Wrapping it in $timeout did fix it. Thanks!

[iinaveedahmed]

Any update on this.

[webdevbyjoss]

+1, reproducible on angular-material version: "0.10.1"

[douwevdijk]

+1, having the same issue with latest release. Temporarily solved it with $timeout.

[jsecademy]

The jquery light remove did not work for me. Scroll gets disabled. The hide did work though.

angular.element('.md-scroll-mask').hide(); // Hackish code to remove overlay

[arnaugm]

Issue is present in 1.0.3 as well, or something very similar.

[BenoitClaveau]

Same issue as @truginis with 1.0.3. I use angular-route not ui-route.

[HighAley]

I use 1.0.4 version. I use $location in md-selected-item-change function for routing and get the same issue. I get it working when have added $timeout $timeout(function(){$location.path(myPath)}, 500);

[bluebirdtech]

+1

I've recently started having problems with md-scroll-mask being stuck too.

I think this change has been triggered by my Chrome install updating (48.0.2564.103 m now) as it was fine before and I haven't changed much else. (e.g. angular-material version)

It wasn't caused by the clear button of an autocomplete as we're not using them. We use plenty of autocompletes though.

I'm running a pre 1.0 version, so will try updating to see if it helps.

[vshanbha]

I have a very similar issue. I have page transitions that are triggered through function called on md-selected-item-change Also I am using the md-autocomplete as a search box. So ng-keyup is used to trigger page transition on enter key press. I use angular-ui-router for the page transitions. I observed that after page transitions the mouse left click / scroll does not respond in the new page. I spent a lot of time blaming (and searching) for issues with the ui router until I found that page transitions caused problems only when triggered from the auto complete component. Then I came across this issue and it looked very similar to my problem. I used the work around specified (added following to my css .md-scroll-mask { position: initial;}) and things seem to be working fine now. Given the symptoms and the work around I would suspect that my issue is same as this one and therefore not creating a new issue. Versions : Angular Material design : 0.11.4 I'll try updating version and check again.

[bluebirdtech]

@vshanbha Where did you add the hide() (workaround) call?

[vshanbha]

@bluebirdtech I added rule to my css. Modified my original comment to reflect the same.

[bluebirdtech]

@vshanbha Thanks, I'll try that.

[hughred22]

@vshanbha I am having the same issue as well. Using $state.go the md-scroll-mask with z-index 50 will sit on top on the next page. So all the controller won't be accessible. And your solution fix the issue.

[jinyangzhen]

@vshanbha & HighAley , i got the same issue that the browser tab looks like hang due to the transparent mask when do $state.go() within callback of md-selected-item-changed (1.0.5) . and the CSS rule resolve mask, however in my case, the dropdown of md-autocomplete is gone after the state transition. I have to asyn the $state.go in timeout block in order to workaround this issue.

Thanks both! save lots of time.

[bluebirdtech]

What browser & version are you using? I'm pretty sure this problem was caused by a Chrome bug for me. I first noticed it in version 48.0.2564.103 m and I've not seen it recently using version 48.0.2564.116 m