Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mat-select placeholder not working. #19514

Closed
KissBalazs opened this issue Jun 2, 2020 · 1 comment · Fixed by #19517 or livepoll/live-poll#189
Closed

mat-select placeholder not working. #19514

KissBalazs opened this issue Jun 2, 2020 · 1 comment · Fixed by #19517 or livepoll/live-poll#189
Assignees
Labels
area: material/select P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@KissBalazs
Copy link

🐞 bug report

Affected Package

Angular Material 9

Is this a regression?

Not sure.

Description

Using placeholder attribute has no effect in mat-select, if mat-label is provided also.

🔬 Minimal Reproduction

Forked from the mat-select example in the documentation:

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

<h4>Basic mat-select</h4>
<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select placeholder="No value selected">  <!-- this is not showing-->
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

Expected and Actual behavior.
Expected: If provided, the label floats to the top of the field, and the placeholder text can be seen if no value is selected.
Actual: the label acts as a placeholder.

🔥 Exception or Error

--

🌍 Your Environment

Angular Version:


@angular/material                  9.0.1

Anything else relevant?

@pkozlowski-opensource pkozlowski-opensource transferred this issue from angular/angular Jun 2, 2020
@crisbeto crisbeto self-assigned this Jun 2, 2020
@crisbeto crisbeto added area: material/select has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Jun 2, 2020
crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 2, 2020
Historically we've only floated the `mat-select` label if a value is selected or the panel is open, because we wouldn't otherwise have anything to show. These changes make it so that we also float it on focus, if there's `placeholder` text that can be shown. This behavior is consistent with `MatInput`.

Fixes angular#19514.
crisbeto added a commit to crisbeto/material2 that referenced this issue Sep 28, 2020
Historically we've only floated the `mat-select` label if a value is selected or the panel is open, because we wouldn't otherwise have anything to show. These changes make it so that we also float it on focus, if there's `placeholder` text that can be shown. This behavior is consistent with `MatInput`.

Fixes angular#19514.
crisbeto added a commit to crisbeto/material2 that referenced this issue Sep 29, 2020
Historically we've only floated the `mat-select` label if a value is selected or the panel is open, because we wouldn't otherwise have anything to show. These changes make it so that we also float it on focus, if there's `placeholder` text that can be shown. This behavior is consistent with `MatInput`.

Fixes angular#19514.
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 12, 2020
Historically we've only floated the `mat-select` label if a value is selected or
the panel is open, because we wouldn't otherwise have anything to show.
These changes make it so that we also float it on focus, if there's
`placeholder` text that can be shown. This behavior is consistent with `MatInput`.

Fixes angular#19514.
mmalerba pushed a commit that referenced this issue Mar 10, 2021
…19517)

Historically we've only floated the `mat-select` label if a value is selected or
the panel is open, because we wouldn't otherwise have anything to show.
These changes make it so that we also float it on focus, if there's
`placeholder` text that can be shown. This behavior is consistent with `MatInput`.

Fixes #19514.
mmalerba pushed a commit that referenced this issue Mar 10, 2021
…19517)

Historically we've only floated the `mat-select` label if a value is selected or
the panel is open, because we wouldn't otherwise have anything to show.
These changes make it so that we also float it on focus, if there's
`placeholder` text that can be shown. This behavior is consistent with `MatInput`.

Fixes #19514.

(cherry picked from commit 7a972fb)
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 10, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.