Thanks to visit codestin.com
Credit goes to github.com

Skip to content

bug(form-field): Label overlaps matPrefix in mat-tab-group on tab change #31056

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.

Sign up for GitHub

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

Jump to bottom
Open
1 task
asimkaya opened this issue May 8, 2025 · 4 comments
Open
1 task

bug(form-field): Label overlaps matPrefix in mat-tab-group on tab change #31056

asimkaya opened this issue May 8, 2025 · 4 comments
Labels
area: material/form-field P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@asimkaya
Copy link

asimkaya commented May 8, 2025 •
edited
Loading

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

When a mat-form-field with appearance="outline" and a matPrefix (e.g., an icon) is placed inside a mat-tab within a mat-tab-group, the mat-label (acting as a placeholder) overlaps with the matPrefix icon after switching tabs.

The issue is typically observed as follows:

  • The form field renders correctly on the initially selected tab.
  • When switching to a different tab containing a similar form field, the label of that form field incorrectly overlaps the prefix icon.
  • Switching back to the first tab might then also show the overlap.

This behavior makes the form field difficult to read and use.

image-1
image-2

Reproduction

StackBlitz link: Link

Expected Behavior

The mat-label (placeholder) of the mat-form-field should always be positioned correctly to the right of the matPrefix icon, without any overlap, regardless of tab switching. The prefix icon should create sufficient space for itself, and the label should respect this space when not floated.

Actual Behavior

After switching to a tab that was not initially active, the mat-label (placeholder) of the mat-form-field incorrectly overlaps with the matPrefix icon. The label does not seem to account for the space occupied by the prefix. This issue is consistently reproducible with the provided minimal reproduction steps.

Environment

  • Angular: 19.0.5
  • CDK/Material: 19.0.4
  • Browser(s): Google Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu):
    Edition Windows Server 2025 Datacenter Evaluation
    Version 24H2
    OS build 26100.2894
@asimkaya asimkaya added the needs triage This issue needs to be triaged by the team label May 8, 2025
@yousafravian
Copy link
Contributor

yousafravian commented May 8, 2025 •
edited
Loading

This is indeed reproducible. Link

version: ^19.2.0

@wagnermaciel wagnermaciel added P2 The issue is important to a large percentage of users, with a workaround area: material/form-field and removed needs triage This issue needs to be triaged by the team labels May 8, 2025
@crisbeto
Copy link
Member

crisbeto commented May 13, 2025 •
edited
Loading

I can't reproduce it anymore in v20, but there seems to be a weird transition on the label when it's first shown. https://stackblitz.com/edit/3unxj1xn?file=src%2Fexample%2Finput-overview-example.ts,src%2Fexample%2Finput-overview-example.html

@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed P2 The issue is important to a large percentage of users, with a workaround labels May 13, 2025
@yousafravian
Copy link
Contributor

I can look into this if no one is working on it

@crisbeto
Copy link
Member

I spent a bit of time on it today and it's tricky, because the form field component sets a class that enables its animations 300ms after ngOnInit. In the example above this happens while the form field is off-screen. When it comes back on the screen, animations are already enabled.

I found some hacky ways to disable it like removing the class when the label offset changes and then re-adding it, but I was hesitant to send it out since it can have performance implications.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: material/form-field P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@crisbeto @wagnermaciel @yousafravian @asimkaya