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(mat-form-field): updateOutlineGap does not recalculate when label is changed to be empty #23943

Closed
ko-tori opened this issue Nov 10, 2021 · 1 comment · Fixed by #23949
Closed
Assignees
Labels
area: material/form-field P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@ko-tori
Copy link
Contributor

ko-tori commented Nov 10, 2021

Description

Some logic in updateOutlineGap skips recalculation when the label content is falsy. This prevents the outlineGap from updating when the label is cleared. It seems like the same logic also prevents the outline gap from updating when the label is removed altogether. In these cases, instead of just returning, the outline should be restored to default.

Reproduction

https://stackblitz.com/edit/angular-nmdjyj

Steps to reproduce:

  1. Have a form-field with appearance="outline" and a mat-label
  2. After loading and outline gap is calculated, set the contents of the mat-label to ""

Expected Behavior

Focusing the form-field should show no outline gap

Actual Behavior

Focusing the form-field should shows an outline gap

Environment

  • Angular:
  • CDK/Material:
  • Browser(s):
  • Operating System (e.g. Windows, macOS, Ubuntu):
@ko-tori ko-tori added the needs triage This issue needs to be triaged by the team label Nov 10, 2021
@crisbeto crisbeto self-assigned this Nov 11, 2021
@crisbeto crisbeto added area: material/form-field has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Nov 11, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 11, 2021
… to empty label

We had a condition where `updateOutlineGap` wouldn't do anything if the label is empty. The problem is that the label could start off with content and then switch to being empty.

These changes set the gap labels to zero width if the gap element is empty.

Fixes angular#23943.
andrewseguin pushed a commit that referenced this issue Jan 18, 2022
… to empty label (#23949)

We had a condition where `updateOutlineGap` wouldn't do anything if the label is empty. The problem is that the label could start off with content and then switch to being empty.

These changes set the gap labels to zero width if the gap element is empty.

Fixes #23943.

(cherry picked from commit d3123f9)
andrewseguin pushed a commit that referenced this issue Jan 18, 2022
… to empty label (#23949)

We had a condition where `updateOutlineGap` wouldn't do anything if the label is empty. The problem is that the label could start off with content and then switch to being empty.

These changes set the gap labels to zero width if the gap element is empty.

Fixes #23943.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 18, 2022
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
… to empty label (angular#23949)

We had a condition where `updateOutlineGap` wouldn't do anything if the label is empty. The problem is that the label could start off with content and then switch to being empty.

These changes set the gap labels to zero width if the gap element is empty.

Fixes angular#23943.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
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
2 participants