bug(Dialog, Form Field): The form field outline appearance label is cut of when it's the first element in a dialog
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### 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
_No response_
### Description
I'm not sure if this is a regression as we used the legacy style form fields before we updated to Angular (material) v15
When placing a form field with appearance="outline" as the first element in a dialog I get the following result:

I'm using the mat-dialog-title and mat-dialog-content directives which will set the top padding of the content part to 0px

A simple workaround is to set a top padding of 5px, but this should work out of the box.
### Reproduction
Steps to reproduce:
1. Open the following [Stackblitz](https://stackblitz.com/edit/angular-rq3u2y?file=src%2Fapp%2Fdialog-overview-example-dialog.html) .
2. Click the Pick one button to open the dialog.
3. The dialog should focus the input and this shows the image.
4. Optional enter a value in the input field
### Expected Behavior
I would expect to be able to see the full label when a form field is the first element in a dialog.
### Actual Behavior
The top part of the label is cut off.
### Environment
Angular CLI: 15.0.3
Node: 16.13.1
Package Manager: npm 8.1.3
OS: win32 x64
Angular: 15.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.1500.3
@angular-devkit/build-angular 15.0.3
@angular-devkit/core 15.0.3
@angular-devkit/schematics 15.0.3
@angular/cdk 15.0.2
@angular/flex-layout 14.0.0-beta.41
@angular/material 15.0.2
@angular/material-moment-adapter 15.0.2
@schematics/angular 15.0.3
rxjs 7.6.0
typescript 4.8.4
Beitragsleitfaden
Rechercherichtung
Beginne mit der verknüpften StackBlitz-Reproduktion und dem Angular Material-Verhalten von Dialog/Formularfeld im Zusammenhang mit mat-dialog-title, mat-dialog-content und appearance="outline". Bestätige das Abschneiden, wenn das Feld als erstes Dialogelement fokussiert wird, und ermittle anschließend die relevante Implementierung und den Regressionstest. Erledigt ist die Aufgabe, wenn das vollständige Label ohne die 5px-Padding-Umgehung sichtbar ist und das Verhalten durch einen Test abgedeckt wird.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100