Material: autocomplete: support icons inside of the input area

[webservconsultant]

Actual Behavior:

• What is the issue? *

When you have other elements in the md-autocomplete search box, the suggestions container does not extend/reduce properly.

• What is the expected behavior?

The suggestions container should extend/reduce properly.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:

http://codepen.io/webservconsultant/pen/pEZbdg

• Details:

Angular Versions: *

• Angular Version:
  Angular 1.5
• Angular Material Version:
  Angular Material 1.1.0

Additional Information:

• Browser Type: *
• Browser Version: *
• OS: *
• Stack Traces:

How do you make the md-autocomplete to extend /reduce the width (even with resizing window).
thanks

[devversion]

Hey thanks for the issue.

I need a few more information, do you expect the dropdown to use the width of the outstanding icons as well?

[webservconsultant]

Thanks for the reply. Yes, the suggestions container should expand/reduce its width (left icon + md-complete +right icon).

[devversion]

I see what you mean.

The problem here is, the icons you have around are not belonging to the autocomplete, because those are outside of the autocomplete element.

<md-icon>...</md-icon>

<md-autocomplete></md-autocomplete>

</md-icon>...</md-icon>

If I remember correctly we had a few issues about having icons inside of the autocomplete.

• I still think this would be some nice enhancement.

[webservconsultant]

Is there any way we can make the suggestions container to respect the parent width (including when resize the window)?

[devversion]

Unfortunately it's impossible yet, because the logic which determines the width is private.

Moving the icons manually per DOM modification into the md-autocomplete-wrap element, could make the trick, but it might end up in a super weird layout.

[webservconsultant]

Settled to this workaround(behavior):
http://codepen.io/webservconsultant/pen/BLkqJp

[devversion]

Great workaround, I will look into this soon.