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 😄

[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]

👍 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.

[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. baa869a contains some of these fixes. It comes from PR #10821.

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