angular / angular/components

bug(matInput): matInput with type "date" has incorrect height

Open
#27,921 1 comment 0 reactions 0 assignees View on GitHub
area: material/input P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

14

### Description

matInput with appearance "outline" with type "date" has hardcoded height of 16px, which combining with font-size of 16px results in cropping of letters.

image

### Reproduction

https://stackblitz.com/edit/xv3jy5?file=src%2Fexample%2Fform-field-appearance-example.html,src%2Fexample%2Fform-field-appearance-example.ts

### Expected Behavior

Nothing should be cropped.

### Actual Behavior

Empty input element text gets cropped.

### Environment

Angular CLI: 15.2.9
Node: 18.12.0
Package Manager: yarn 1.22.19
OS: win32 x64

Angular: 15.2.9
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1502.9
@angular-devkit/build-angular 15.2.9
@angular-devkit/core 15.2.9
@angular-devkit/schematics 15.2.9
@angular/fire 7.5.0
@schematics/angular 15.2.9
rxjs 7.8.0
typescript 4.8.4
webpack 5.76.0

Contributor guide

Open the contributing guide

Research direction

Start by running the linked StackBlitz reproduction for the Angular Material matInput with outline appearance and type="date". Inspect the matInput and form-field styling involved in the fixed 16px height; done means the date input text is no longer cropped while preserving the expected outline appearance.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.