Material: 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!

[inaveedahmed]

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

[tbock]

Same issue of browser tab looking like its stuck when using $state.go() inside callback of md-selected-item-change. The $timeout fix worked for me as well. The strange thing is that I'm doing this ($state.go() inside the callback) in a different state in the same site without ill effect. Using version 1.0.5 and Chrome version 48.0.2564.116.

[TroodoNmike]

Still bug in my version 1.0.5 (chrome). When I have autocomplete in dialog, I clear result, select new one, after dialog is minimised/closed it freezes chrome by adding overlay mask.

Work our is adding angular.element('.md-scroll-mask').hide();

$mdDialog.finally(function() {
    angular.element('.md-scroll-mask').hide();
});

[TroodoNmike]

I have also noticed that when bug occurs the scroll on the body is frozen as well (body element position is set to fixed, and its not removed when dialog is closed). As a workaround apart from removing md-scroll-mask I am setting position: inherit on the body element.

[TroodoNmike]

last update from me. I now use a cleaner way for this bug. Angular material provides service called $mdUtil and I when my dialog closes I run $mdUtil.enableScrolling();

[Datcam]

Hello!
I have one question about md-autocomplete. Anybody can say me how to click on this button(cross) by my own script ?? I do not have success. I mean that:
var button = document.querySelector('md-autocomplete button');
buttons.onclick();

[Antariano]

Also seeing this on 1.0.5. I have an md-autocmplete inside an ng-if. Toggling the ng-if does not remove the .md-scroll-mask

[Kasahs]

+1 seeing this in 1.0.6 when used inside md-chips and location changes when chips are added or removed but the mask remains on location change blocking all user interaction. Changing location after digest cycle completes (i.e is wrapping it in $timeout(fn , 0) solves this. IMO this should not be necessary as this is simply related to focusing the element.

[S8nsick66]

+1 seeing this in 1.0.6 with $state.go.
The fix from @vshanbha fixes the problem with not being able to click on anything on the page BUT I have an md-autocomplete on the page I navigate to and the autocomplete results are not visible.

[reachlakstar]

@vshanbha fixes the problem, when i search again the autocomplete, i lose the drop down ... like @S8nsick66 commented

[vshanbha]

@S8nsick66 , @lakstap Have you checked the comment from @jinyangzhen . Quoting it here. _"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."_
Hope this helps.

[S8nsick66]

Thank you @vshanbha, that works.

setTimeout(
    function(){
        $state.go(state.url, state.params, {
            location: true,
            reload: true,
            inherit: true
        })
    }, 50);

This was my first attempt, it works too.

var url = $state.href(state.name, state.params, {absolute: true});
$window.location.href = url;

[mzaarour]

+1
This happen
1- when you open an element such as auto complete element (can be date picker),
2- then the scroll of the container disapear, which is, i think the "normal" behaviour of the element.
3- Event occurs to hide the element (ie with ng-if which delete it to the dom) before it finishes it closes, the element won't have time to put newer the scroll

Result ==> the app freezes, should refresh the page to make it work again

Hope this can help fix the problem

[mzaarour]

Temp solution : Put this lines into your function which hide the md-autocomplete

//Patch for autocomplete which doesn't remove
angular.element('body')[0].style = '';
if(angular.element('.md-scroll-mask')[0])
    angular.element('.md-scroll-mask')[0].remove();

[leibale]

what about this?

[uocnb]

Got same problem with smDateTimeRangePicker, tried to remove .md-scroll-mask already but it back after open and close another menu 2 or 3 times.

Tried with versions: 1.0.9, 1.0.10, 1.1.1

[jlamarr22]

What about just hiding the button with css? Seems to be working properly without it there and then you can create a custom button to set the value of the autocomplete back to blank.

md-autocomplete-wrap button[ng-click="$mdAutocompleteCtrl.clear($event)"] { display:none; }

[jithureddy]

Looks like this issue fixed in latest version of angular material for desktops but not for touch devices

10521. How to handle this

[madchops1]

Where we at with this?

[orenagiv]

I'm using v1.1.4 and I can reproduce this on Safari as well as Chrome (with or without the floating label).
On Chrome is causes a double click on the clear-button to release the suggestions container and then clear the search text.
On Safari the clear-button does not work at all, unless md-scroll-mask is out of the way.

Workaround - using CSS:

.md-scroll-mask {z-index:0!important}

[frame]

I found the culprit: After the destruction of the autocomplete instance, its queued promises might still be running in the background. Once the promise gets finally resolved, onResultsRetrieved() gets triggered and inserts partially broken markup: div.md-scroll-mask div.md-visually-hidden and md-virtual-repeat-container all end up under <body>, regardless if the user already blurred the element and moved on.

The often mentioned fix to manually delete .md-scroll-mask after a timeout is just a lucky hit because the async call might run for a long time and onResultsRetrieved() will pollute your markup shortly after.

function onResultsRetrieved(matches) {
  cache[term] = matches;

  // Just cache the results if the request is now outdated.
  // The request becomes outdated, when the new searchText has changed during the result fetching.
  if ((searchText || '') !== ($scope.searchText || '')) {
    return;
  }
  // TODO: Also return if the instance was abandoned or destroyed

  handleResults(matches);
}

The proper fix must detect if the original instance was abandoned or destroyed and return, similar if searchText was empty.

In my case I was able to solve this by simply emptying searchText on cleanup(), however this solution might not apply to everyone that's why I didn't create a PR.

--- angular-material.js
+++ angular-material-clearSearchText.js
@@ -25930,6 +25930,7 @@
    * Removes any events or leftover elements created by this controller
    */
   function cleanup () {
+    $scope.searchText = '';
     if (!ctrl.hidden) {
       $mdUtil.enableScrolling();
     }

[Splaktar]

1.1.5 includes some additional fixes for related issues. https://github.com/angular/material/commit/baa869a contains some of these fixes. It comes from PR https://github.com/angular/material/pull/10821.

If you are seeing issues after 1.1.5, please open a new issue with a CodePen reproduction.