bug(select) Extra space at the end of placeholder span

[dima74]

Bug:

I have the following code:

<md-select placeholder="hello" [value]="1">
  <md-option [value]="1">one</md-option>
  <md-option [value]="2">two</md-option>
</md-select>

The most important part is placeholder="hello". Angular Material will create separate span for placeholder and put string hello inside it.

What is the expected behavior?

The resulting span should look like <span>hello</span>, without extra space at the end.

What is the current behavior?

The resulting span looks like <span>hello </span>, with extra space at the end:

What are the steps to reproduce?

Plunker: http://plnkr.co/edit/0egSObwCtsCqxVMW6WRH?p=preview

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

If placeholder consists of two words, then this extra space may cause unnecessary word wrap.

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

At least Arch Linux, Angular 4.0.0, Material 2.0.0-beta.10, TypeScript 2.3.3, Chrome 59.

Is there anything else we should know?

I think you can fix this issue by remove spaces around {{ placeholder }} in > {{ placeholder }} </span> (this line).

[donroyco]

I thought this was done to keep some space between the placeholder and the asterisk if a field is marked as required. It's not the best solution, the asterisk should have some margin-left and the placeholder should have no extra space.

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