Material: md-autocomplete suggestion box not close without select

[mohammad6006]

I test auto complete demo on my android phone

https://material.angularjs.org/latest/demo/autocomplete

I couldnt hide auto complete suggestion box without select one of them

I tap outside of auto complete too but not close

[devversion]

Please provide more information? Are you using a touch device? Which browser?

[mohammad6006]

xperia z2
google chrome

[Tabishtabby]

I ran into the same issue. I'm using v1.0.5 material angular at the moment. The autocomplete behaves perfectly on a desktop but on a mobile device (touch screen), the close button on the md-autocomplete doesn't work. I cannot click any other button on the screen I have to erase the text entered to dismiss the autocomplete dropdown only then can i click the other buttons visible on the screen.

[friedolinfoerder]

I've tested all versions on the website and this issue is there since version 1.0.0
In version 0.11.4 it's working as expected.

On desktop it's fine but on touch devices the suggestion box doesn't close when clicking on the _md-scroll-mask_ element

[mahonrig]

Just wanted to note that I was also having this same problem, with the scroll-mask element blocking all touch events from changing focus.

Loading full jquery fixed the issue though, if that helps anyone hunt down the bug or have a temporary fix.

[williamdoriat]

Same problem here, does anyone have a temporary fix without jQuery? I'm trying..

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[jessemc98]

This is still an issue, the inputs and autocompletes are broken on the latest release.
The bug seems to be linked to the mouseInputHijacker function running on mouse-down, if we disable the event listener in dev tools it fixes the bug.

You can replicate the issue by clicking on the demos below while using chrome on an android phone or on chrome dev tools by emulating a touch device.

https://material.angularjs.org/1.1.0-rc.5/demo/autocomplete
https://material.angularjs.org/1.1.0-rc.5/demo/input

[EladBezalel]

@jessemc98 you can file a new issue and maybe help us solving it by suggesting a PR.

[marlonmleite]

This is a problem with the latest version of the material.
This is bad like User, because by clicking on the screen does not close the dropdown, only When You select one item.
On the computer with click function is ok.

[GaretWebster]

Does anyone have a temporary fix yet that doesn't require JQuery?

I know it's been closed for 2.0 like all the other bugs still left in angular material, but this literally makes autocomplete unusable on mobile devices.

Edit: I am currently disabling the md-scroll mask and it partially fixes the behavior, although I am not sure if there are other negative side effects of this.

.md-scroll-mask {
    display: none;
}

[mategvo]

.md-scroll-mask {
    display: none;
}

This solution doesn't work on Android, haven't checked iOS.

[gltknbtn]

.md-scroll-mask { display: none; }

Hi friends, this solution works in my android phone.. You can try to modify your "angular-material.css " stylesheet.. Thanks for your help.

[Aymer-el]

Hi everyone,

This solution has worked in my case (cf: closing the dropdown sugggestion of md-autocomplete without selecting (or clicking in the webpage) :

        document.dispatchEvent(new Event('click'));

I haven't test on mobile nevertheless you are probably using Ionic or loading a webpage and so this should work either.

[Splaktar]

The workaround for this issue is posted here. I'm going to lock this so that all of the conversation can happen in one place (an open issue): https://github.com/angular/material/issues/9581.