angular / angular/components

bug(FORM-FIELD): Container shape is incorrectly applied for both outlined and filled.

Offen
#30,850 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/form-field P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

- Filled container shape only applies to the top half of the container.
- Outline container shape incorrectly uses the shape dimensions as the padding causing very wide fields.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-sd5v83bx?file=package.json
Steps to reproduce:
1. Override form-field-overrides with "filled-container-shape: var(--mat-sys-corner-full),"
2. Override form-field-overrides with "outlined-container-shape: var(--mat-sys-corner-full),"

### Expected Behavior

The form-fields should be a rectangular with fully rounded corners.

### Actual Behavior

Filled form-fields are only rounding the top half.
Outlined form-fields are become 18000px wide

### Environment

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginnen Sie mit der bereitgestellten StackBlitz-Reproduktion und den Einstellungen für form-field-overrides für gefüllte und umrandete Felder. Überprüfen Sie das Verhalten bei den angegebenen Angular- und Material-Versionen und bestätigen Sie anschließend, dass beide Varianten vollständig abgerundete rechteckige Ecken haben, ohne dass das umrandete Feld übermäßig breit wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, css, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
55/100

Neue Issues direkt in Ihr Postfach

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