Autocomplete option not clickable

[JacobBrandt]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Should be able to click option in autocomplete.

What is the current behavior?

Unable to click option in autocomplete.

What are the steps to reproduce?

https://material.angular.io/components/component/autocomplete
Launch version 45.7 of Firefox. Use the example provided by the material website. I don't know why but for some reason I could not reproduce the issue within a plunker. The material website demonstrates the problem I am having though with this version of Firefox.

What is the use-case or motivation for changing an existing behavior?

It's a bug

Which versions of Angular, Material, OS, browsers are affected?

Firefox v45.7

Is there anything else we should know?

Nope

[crisbeto]

The issue should be fixed in master. You can try installing the latest build:

npm install https://github.com/angular/material2-builds.git

[JacobBrandt]

@crisbeto I'll try the latest build later today and see if it works. Thanks.

[jelbourn]

Closing since @crisbeto says it's already fixed on master, feel free to comment if that's not the case

[JacobBrandt]

@jelbourn @crisbeto Well after doing npm install of latest build like you both suggested. I can't even bring up my application now. Lots of Typescript errors. For instance.

ERROR in node_modules/@angular/material/typings/button/button.d.ts (40,22): Class 'MdButton' incorrectly implements interface 'CanDisable'.
Property 'disabled' is missing in type 'MdButton'.

[jfilgairacordon]

I'm having the same issue using Geecko v45.0.22.0. I'm making a copy of my project. Once it finish, I will try to update material to the last version and try it again. I will comment if it works later.

[jfilgairacordon]

I have updated my project and resolved all the problems. The autocomplete still not working on Geecko v45.0.22.0.

[crisbeto]

I'm still not able to reproduce it in Firefox. Can you post an example?

[jfilgairacordon]

I'm using an embeded (WebBrowser) geckofx package from NuGet on a windows form application that allows me to use this engine on our application. For some dev reasons we have to use this.

When the user clicks over an option, the autocomplete disapears and the ngModel does not get the new value.

[sabithpocker]

cdk-overlay-container has z-index:1000. cdk-overlay-pane also has the same z-index:1000 shouldn't it be z-index:1001 for cdk-overlay-pane or Can we just omit z-index for cdk-overlay-pane?

Disclaimer: I have no idea if its actually related to this issue, but reached here while looking for something related to autocomplete.

[jfilgairacordon]

I've try with z-index: 1001 (via Harcoded CSS) and still not working.

[crisbeto]

@jfilgairacordon I've tried it against all the supported browsers/devices that I could find (as well as some unsupported, like Firefox 45) and I couldn't reproduce it anywhere. My guess is that it's something specific to your setup. I'm sorry, but there's no way to help without a repro case. The issue can be reopened if you manage to isolate it in a Plunkr. We're also open to pull requests, if you manage to track the issue down on your own.

@sabithpocker the z-index isn't relevant here. The overlays will stack correctly, because even though they have the same z-index, every newly-added overlay will be added after all others in the DOM.