angular / angular/components

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

Aperta
#27,625 10 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: material/datepicker area: material/form-field P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### 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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia riproducendo il comportamento nello StackBlitz collegato usando il Angular Material datepicker con un form control obbligatorio, quindi esamina l’implementazione di datepicker e form-field. Il lavoro è completato quando il passaggio con Tab dall’inserimento di testo al pulsante del calendario non mostra l’errore di campo obbligatorio, mentre l’uscita da entrambi continua ad attivare la validazione.

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

Valutazione

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.