angular / angular/components

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

Abierto
#17,902 1 comentario 7 reacciones 0 asignados Ver en GitHub
area: material/form-field material spec P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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?

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción vinculada de StackBlitz y su punto de entrada src/app/form-field-appearance-example.html; cambia el tercer campo de entrada de matSuffix a matPrefix con outline appearance y reproduce el movimiento del placeholder. Rastrea el comportamiento del outline de Angular Material form-field para el icono de prefijo. Está hecho cuando el placeholder enfocado se mueve al borde superior izquierdo mientras el icono matPrefix permanece correctamente posicionado.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bien especificado
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.