angular / angular/components

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

Open
#30,850 2 comments 0 reactions 0 assignees View on GitHub
area: material/form-field P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

Research direction

Start with the provided StackBlitz reproduction and the form-field-overrides settings for filled and outlined fields. Verify the behavior at the specified Angular and Material versions, then confirm that both variants have fully rounded rectangular corners without the outlined field becoming excessively wide.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, css, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.