angular / angular/components

form-field(outline): placeholder animation with matPrefix icon not moving to the top left border

Ouverte
#17,902 1 commentaire 7 réactions 0 personnes assignées Voir sur GitHub
area: material/form-field material spec P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

What is the expected behavior?
When clicking on the input, The placeholder should move to the top left side of the border.

https://material.io/design/components/text-fields.html
In the link above, Choose OUTLINED and check the following options : 'Leading icon' and 'Trailing icon'
Click on the placeholder and it will move to the top left side correctly,

What is the current behavior?
Currently when there is a matPrefix mat-icon and the appearance is 'outline', When clicking on the input field, The placeholder goes to the top of the field but not to the left (probably because of the icon).

What are the steps to reproduce?
https://stackblitz.com/angular/ygjnerlpdko?file=src%2Fapp%2Fform-field-appearance-example.html

On the html file, Change the 3rd input from matSuffix to matPrefix and click on the placeholder

Which versions of Angular, Material, OS, TypeScript, browsers are affected?
I'm on Chrome 78.0.3904.108 , Windows10, AngularCLI 8.3.3, Material 8.2.3

Is there anything else we should know?

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et son point d’entrée src/app/form-field-appearance-example.html ; remplacez le troisième champ de saisie de matSuffix par matPrefix avec outline appearance et reproduisez le déplacement du placeholder. Suivez le comportement de l’outline de Angular Material form-field pour l’icône de préfixe. C’est terminé lorsque le placeholder ciblé se déplace vers la bordure supérieure gauche tandis que l’icône matPrefix reste correctement positionnée.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Clairement spécifiée
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.