angular / angular/components

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

Aperta
#17,902 1 commento 7 reazioni 0 assegnatari Vedi su GitHub
area: material/form-field material spec P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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?

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione StackBlitz collegata e il relativo punto di ingresso src/app/form-field-appearance-example.html; cambia il terzo campo di input da matSuffix a matPrefix con outline appearance e riproduci lo spostamento del placeholder. Traccia il comportamento dell’outline di Angular Material form-field per l’icona del prefisso. Il lavoro è completato quando il placeholder con il focus si sposta sul bordo in alto a sinistra mentre l’icona matPrefix rimane posizionata correttamente.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.