angular / angular/components

bug(Dialog, Form Field): The form field outline appearance label is cut of when it's the first element in a dialog

Ouverte
#26,352 12 commentaires 10 réactions 0 personnes assignées Voir sur GitHub
area: material/dialog 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?

- [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:
![image](https://user-images.githubusercontent.com/40668465/210241509-5e6783b6-3063-456b-b3fc-be7b1f757a91.png)

I'm using the mat-dialog-title and mat-dialog-content directives which will set the top padding of the content part to 0px
![image](https://user-images.githubusercontent.com/40668465/210242034-68ab4fa8-964c-49eb-86db-73c137dc7d2b.png)

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et le comportement d’Angular Material du dialogue/champ de formulaire impliquant mat-dialog-title, mat-dialog-content et appearance="outline". Confirmez le rognage lorsque le champ reçoit le focus en tant que premier élément du dialogue, puis localisez l’implémentation concernée et le test de régression. C’est terminé lorsque le libellé complet est visible sans le contournement de padding de 5px et que le comportement est couvert par un test.

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

Évaluation

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

Recevez les nouvelles issues par e-mail

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