angular / angular/components

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

Offen
#17,902 1 Kommentar 7 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/form-field material spec P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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?

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginnen Sie mit der verknüpften StackBlitz-Reproduktion und ihrem Einstiegspunkt src/app/form-field-appearance-example.html; ändern Sie das dritte Eingabefeld von matSuffix zu matPrefix mit outline appearance und reproduzieren Sie die Bewegung des Platzhalters. Verfolgen Sie das Outline-Verhalten von Angular Material form-field für das Präfixsymbol. Erledigt ist es, wenn sich der fokussierte Platzhalter zum oberen linken Rand bewegt, während das matPrefix-Symbol korrekt positioniert bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.