Material: chips: placeholder is truncated even though there is room for it in the component

[AI3Zakir]

Actual Behavior:

• What is the issue?*
  Long placeholder on md-autocomplete is cut
• What is the expected behavior?
  Full placeholder should be seen

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
  http://codepen.io/iverson4ever/pen/EmWZjd
• Details:
  Placeholder on HTML line 11

AngularJS Versions: *

• AngularJS Version:v1.5.5
• AngularJS Material Version:v1.1.1

Additional Information:

• Browser Type: *Chrome
• Browser Version:* 58.0.3029.81 (64-bit)
• OS:* Ubuntu 16.04
• Stack Traces:

[Splaktar]

This is related to https://github.com/angular/material/issues/10344, but not a duplicate.

Here's a CodePen that demonstrates the issue when using chips without autocomplete.

[janacm]

Hi has there been any progress on this issue?

[Splaktar]

There has been progress, but no solution is available yet. I submitted PR https://github.com/angular/material/pull/11098 which is needed before this issue can be solved, but it ran into some presubmit failures (breaking changes). I need to re-visit that PR, fix the issues, and re-submit. I don't have an ETA, but both chips and autocomplete are due for some fairly significant bug and a11y fixes in 1.1.10+.

[oliversalzburg]

I was pretty confident in my approach in #11276 and we're testing it now internally. If you want me to get involved, let me know. Otherwise I'll patiently wait for the official fix :)

[Splaktar]

@oliversalzburg thank you very much. I will review your suggestion and see if it can be used in the existing PR. I'll let you know how it goes.

[marosoft]

@Splaktar the fix suggested by @oliversalzburg works fine. There is a problem when the window is too small to fit the chips and the placeholder text. The placeholder text is not moved into a new line unless the window is small enough to show a substring containing only "Very Long Placeholder For".

CodePen

[Splaktar]

I recall that there were some keyboard/focus/a11y issues that needed to be solved beyond just those suggested changes. I need to dig into this again for sure. I've bumped the priority back up.

[Splaktar]

Yeah, I think that fix mostly works now that the other fixes have landed. But the last issue is the one you mention here, if you add a long chip, or multiple chips, there are cases where the input gets shrunk too small to show the placeholder.

It seems like we need a min-width, but it also seems like it would vary depending upon the placeholder used.

I think that our best approach for solving this is to add an md-input-class like <md-autocomplete> has. Then the developer can add a min-width that works for their app and placeholder.