angular / angular/components

bug(MatFormField): getConnectedOverlayOrigin includes form field hint area

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

Descrizione

### Is this a regression?

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

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

v14 (works w/ Legacy)

### Description

When migrating to the MDC-based components, the `getConnectedOverlayOrigin()` method on `MatFormField` now seems to point to the bottom of entire form field div (i.e. including the hint area) rather than the bottom edge of the input box. This makes it difficult to attach overlays to the bottom of custom form fields in a clean non-hacky way.

Basic example that demonstrates the problem:

1. Create a basic component that implements `MatFormFieldControl` (just directly copying the example [from the guide here](https://material.angular.io/guide/creating-a-custom-form-field-control) works for this).
2. Add a simple `mat-autocomplete` and wire it up to the input on the component.
3. Add a `MatAutocompleteOrigin` field to the component which points to the `MatFormField`'s `getConnectedOverlayOrigin()` (also may need to update this on ngOnInit to be safe).
4. Set the `matAutocompleteConnectedTo` in the template to the `MatAutocompleteOrigin` field.

Previously this would make the autocomplete overlay open lined up below the bottom edge of the form field, now there is an unsightly gap.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/6vnpqz

Steps to reproduce:
1. Click the form field

### Expected Behavior

Attached overlay should appear directly below the form field's underline

### Actual Behavior

Attached overlay appears below the form field's hint area

### Environment

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione StackBlitz e il punto di ingresso MatFormField.getConnectedOverlayOrigin(), utilizzando la configurazione personalizzata di MatFormFieldControl e mat-autocomplete descritta nell’issue. Conferma che l’overlay connesso sia posizionato direttamente sotto la sottolineatura del campo del modulo anziché sotto l’area dell’hint.

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
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.