angular / angular/components

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

Ouverte
#30,850 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
area: material/form-field P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz fournie et les paramètres de form-field-overrides pour les champs remplis et bordés. Vérifiez le comportement avec les versions spécifiées d’Angular et de Material, puis confirmez que les deux variantes ont des coins rectangulaires entièrement arrondis sans que le champ bordé ne devienne excessivement large.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, css, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
55/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.