chips: placeholder disappears

[mmalerba]

Bug, feature request, or proposal:

Placeholder disappears after typing 2 characters into chip input

What is the expected behavior?

Placeholder doesn't disappear

What is the current behavior?

Placeholder disappears

What are the steps to reproduce?

1. Go to this plunker: http://plnkr.co/edit/qHQlWKfGSyvIhgm6MUop?p=preview
2. Type 2 characters into the input

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

Existing behavior is incorrect

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

master

Is there anything else we should know?

[julianobrasil]

Yeah... I replaced your code with material.angular.io example code: http://plnkr.co/edit/onlnaLR0y5DoRIHCJ4IX?p=preview

And noticed:

1. Missing floating placeholder
2. When the floating placeholder appears, it is behaving a little bit strange
3. It's ignoring matChipInputSeparatorKeyCodes==ENTER
4. After the third fruit added the input caret is not visible anymore due to the limited input width. If you increase the mat-form-field width, you can add more fuits
5. The chips go off mat-form-fied limits without wraping (sometimes you are able to add a lot of off-limit chips - its easy to see this in material.angular.io)

[amcdnl]

Confirmed the issues.

If you add the following CSS, you can achieve the no-wrapping issues:

.mat-form-field-type-mat-chip-list {
  .mat-form-field-flex {
    flex-wrap: wrap;
  }
  .mat-form-field-prefix, 
  .mat-form-field-suffix {
    max-width: 100%;
  }
}

However, when you do this the input breaks into its own separate line leaving an awkward space.

I think this component will need to be re-worked in order to make this work nicely, so I'm giving this pretty high effort to fix.

[mmalerba]

It looks like part of the issue is that the example page is out of date. We changed the mat-chip-list to work with mat-form-field without needing to cram it in the matPrefix. New style is like this: http://plnkr.co/edit/kc3bxAZRgHS0JbGl3qSX?p=preview

[amcdnl]

I've made the PR to fix the placeholder and PR to fix the invalid example. :)

[MaestroJurko]

Why was placeholder removed if there are values in chips?

[amcdnl]

@puppeteer701 - can you show an example?

[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.}