Skip to content

mat-form-field required asterisk has preceding   that fails to collapse with prior whitespace #15489

Closed
@stevenyxu

Description

@stevenyxu

What is the expected behavior?

When a <mat-label> has trailing whitespace (e.g., due to a formatter putting </mat-label> on a new line and the template compiler not collapsing whitespace) and the field is required, there should be one space between the label and the asterisk.

84zLDOjNjAY

What is the current behavior?

There are two spaces.

stackblitz

https://stackblitz.com/edit/angular-h3fng3?file=app/form-field-label-example.html

mat-form-field adds &nbsp;* to the label when the field is required.

https://github.com/angular/material2/blob/master/src/lib/form-field/form-field.html#L55

The surrounding .mat-form-field-label already has white-space: nowrap so &nbsp; doesn't serve any additional nowrapping function I know of.

https://github.com/angular/material2/blob/master/src/lib/form-field/form-field.scss#L98

What are the steps to reproduce?

https://stackblitz.com/edit/angular-h3fng3?file=app/form-field-label-example.html

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Current, since at least d6fec35. All browsers in theory, though I haven't tested.

Is there anything else we should know?

I'll send a PR to see how it integrates. It'll likely trivially break many screendiff tests.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions