bug(autocomplete): input underline goes under the autocomplete container

[m98]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The autocomplete is a normal text input and it should follow inputs style and behavior.

Text fields should indicate their state – whether enabled or disabled, empty or filled, valid or invalid – with clear label, input, and assistive text.
The input line indicates where to enter text, displayed below the label. When a field is active or contains an error, the line’s color and thickness vary. (source)

I expect when the autocomplete input is active I can see the input underline (aka input line)

What is the current behavior?

The underline (input line) goes under the autocomplete container. The image bellow shows the current behavior:

https://material.angular.io/components/autocomplete/examples

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

@angular/cli: 1.1.1
node: 6.10.3
os: linux x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/material: 2.0.0-beta.7
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.1
@angular/compiler-cli: 4.1.3
@angular/language-service: 4.1.3

[donroyco]

Are you sure this is the behaviour in more than just one browser?

[m98]

I used two different computers, and both had latest version of chrome on it.

[donroyco]

I'm not talking about other computer. I'm talking about different browsers, like Internet Explorer 11, Microsoft Edge, Mozilla Firefox and Apple Safari. Does it occur in these browsers as well?

[m98]

I tried with the two different computers, with different screen size and resolutions.

Could you please try the autocomplete using IE, FireFox and Safari and provide screenshot of their behavior?
Thanks

[julianobrasil]

I have some browsers installed over here.

IE11:

Edge:

Chrome (59.0.3071.115 64 bits)

Firefox 54.0.1

Firefox 45.0.1 (Legacy)

2012 Safari for windows (Legacy)

[m98]

@julianobrasil

Thanks a lot! Good screenshots

It seems that just I and Edge are showing it almost correctly. But if you look carefully at the IE and Edge screenshot you might see it's not showing the underline as its current height is!

I wish my PR works to fix this

Thanks again for screenshots!

[willshowell]

The autocomplete offset really depends on the mat-input-infix padding, which is dependent on the input typography config.

@crisbeto I wonder if the css could be refactored in some way to share the value? The hardcoded 6/8px offset seems really fragile. Maybe #4914 could help, but instead of attaching to mat-input-container, it is attached to mat-input-flex?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}