Components: Floating label not appearing for select component when form field appearance is outline

Created on 10 Aug 2018  路  3Comments  路  Source: angular/components

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Floating label should be displayed when placeholder is set on select component and form field appearance is "outline".

What is the current behavior?

Floating label is not displayed when placeholder is set on select component and form field appearance is "outline".

What are the steps to reproduce?

https://stackblitz.com/edit/angular-pu81w2?file=app/select-overview-example.html

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

Should be consistent with input and should also match Material Components Web Catalog

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

Angular 6, Material 6.4.2, Windows, Chrome

Is there anything else we should know?

Don't think so

Most helpful comment

Thanks @crisbeto I'll use the mat-label element.

Just want to point out though that what you said about placeholder behavior in this instance is completely inconsistent with the functionality of the Material inputs and the select components with standard appearance. Each of these components keep their placeholders as floating labels, even when the component has a value.

https://material.angular.io/components/input/overview
https://material.angular.io/components/select/overview

If placeholders should only be displayed when the component doesn't have a value then this should be the case for all variations of input and select components.

All 3 comments

That's because the placeholder attribute is only used to show something if no value is selected. We used to support using it as a label on the old form field variant, but that usage is deprecated. You should use the mat-label element to set the floating label: https://stackblitz.com/edit/angular-pu81w2-9ttfrg

Thanks @crisbeto I'll use the mat-label element.

Just want to point out though that what you said about placeholder behavior in this instance is completely inconsistent with the functionality of the Material inputs and the select components with standard appearance. Each of these components keep their placeholders as floating labels, even when the component has a value.

https://material.angular.io/components/input/overview
https://material.angular.io/components/select/overview

If placeholders should only be displayed when the component doesn't have a value then this should be the case for all variations of input and select components.

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._

Was this page helpful?
0 / 5 - 0 ratings