angular / angular/components

bug(FormField): Tabbing to then out of form field with "required" validator shows validation error.

Abierto
#27,625 10 comentarios 0 reacciones 0 asignados Ver en GitHub
area: material/datepicker area: material/form-field P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

Premature error validation occurs when tabbing from the form field text entry section to the datepicker button. From an A11Y and usability perspective, this should not occur until the user has left the containing form field and button since the datepicker button is a valid way of filling out the form field.

### Reproduction

**StackBlitz link:** https://components-issue-zzukvj.stackblitz.io
**Steps to reproduce:**
1. Add Datepicker to app from angular material code example
2. Add required validator to form control
3. Tab from the form field section to the datepicker button
4. Error shows, despite not having left the control

### Expected Behavior

Required validation does not occur when tabbing from the text entry section of the datepicker to the calendar pop-out button.

It should only occur when tabbing out of the containing form field and button.

### Actual Behavior

Required error validation occurs when tabbing from the text entry section of the datepicker to the open calendar button

### Environment

- Angular: 15.2.4
- CDK/Material: 15.2.5
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS, Windows

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza reproduciendo el comportamiento en el StackBlitz enlazado usando el Angular Material datepicker con un form control requerido y, después, inspecciona la implementación de datepicker y form-field. Se considera terminado cuando al pasar con el tabulador de la entrada de texto al botón del calendario no se muestra el error de requerido, mientras que al salir de ambos se sigue activando la validación.

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

Evaluación

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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.