Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug(form-field): form field prefix in overlay #29064

Open
1 task
adumitrescu-plenty opened this issue May 17, 2024 · 1 comment · Fixed by #29123
Open
1 task

bug(form-field): form field prefix in overlay #29064

adumitrescu-plenty opened this issue May 17, 2024 · 1 comment · Fixed by #29123
Labels
area: material/form-field P4 A relatively minor issue that is not relevant to core functions

Comments

@adumitrescu-plenty
Copy link
Contributor

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

The issue is about the missing padding for the label when using a form field inside an overlay with ng-content. It can be easily reproduced in stackblitz, I will provide a link where it can be seen how is misbehaving. Without ng-content, everything works fine.

Reproduction

StackBlitz link:
Steps to reproduce:

  1. click on open

https://stackblitz.com/edit/ipwssz-9pucs5?file=src%2Fexample%2Fcdk-overlay-basic-example.html

Expected Behavior

The label should be positioned after the prefix.

Actual Behavior

The label transition is not working properly.

Environment

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | '_ \ / | | | | |/ _ | '__| | | | | | |
/ ___ | | | | (
| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/

Angular CLI: 17.3.0
Node: 18.18.0
Package Manager: yarn 1.22.19
OS: linux x64

Angular: 17.3.0
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1703.0
@angular-devkit/build-angular 17.3.0
@angular-devkit/core 17.3.0
@angular-devkit/schematics 17.3.0
@angular/cdk 17.3.6
@angular/material 17.3.6
@angular/material-experimental 17.3.6
@angular/material-moment-adapter 17.3.6
@schematics/angular 17.3.0
rxjs 7.4.0
typescript 5.4.2
zone.js 0.14.0

@adumitrescu-plenty adumitrescu-plenty added the needs triage This issue needs to be triaged by the team label May 17, 2024
@adumitrescu-plenty adumitrescu-plenty changed the title bug(overlay): prefix in overlay bug(overlay): form field prefix in overlay May 17, 2024
@adumitrescu-plenty adumitrescu-plenty changed the title bug(overlay): form field prefix in overlay bug(form-field): form field prefix in overlay May 17, 2024
@crisbeto crisbeto added P4 A relatively minor issue that is not relevant to core functions area: material/form-field and removed needs triage This issue needs to be triaged by the team labels May 22, 2024
adumitrescu-plenty added a commit to adumitrescu-plenty/components that referenced this issue May 27, 2024
Fixes the outline label position when a prefix is present and the form field is not yet rendered.

Fixes angular#29064
crisbeto pushed a commit that referenced this issue May 28, 2024
* fix(form-field): outline label position

Fixes the outline label position when a prefix is present and the form field is not yet rendered.

Fixes #29064

* fix(material/form-field): adjust text

* fix(material/form-field): requested changes

* fix(material/form-field): adjustments for shadow root

* fix(material/form-field): adjust shadow node check

* fix(material/form-field): adjust logic

Simplify the method
crisbeto pushed a commit that referenced this issue May 28, 2024
* fix(form-field): outline label position

Fixes the outline label position when a prefix is present and the form field is not yet rendered.

Fixes #29064

* fix(material/form-field): adjust text

* fix(material/form-field): requested changes

* fix(material/form-field): adjustments for shadow root

* fix(material/form-field): adjust shadow node check

* fix(material/form-field): adjust logic

Simplify the method

(cherry picked from commit eb22e2e)
@crisbeto
Copy link
Member

Reopening since the fix was rolled back.

@crisbeto crisbeto reopened this May 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: material/form-field P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants