MatFormField floatLabel can not be set to "never" when using appearance outline

[jwittekind]

Reproduction

Angular Material 8.2.3
<mat-form-field appearance="outline" floatLabel="never"> <mat-label>Input Field</mat-label> <input matInput> </mat-form-field>

Steps to reproduce:

1. Create a form field with an input (angular v8.2.3)
2. Add floatLabel="never" tag // <-- still works
3. Add appearance="outline" tag // <-- doesn't work

Expected Behavior

The MatFormField label shouldn't float when floatLabel tag is set to "never" and appearance is set to "outline".

Actual Behavior

The label is still floating when floatLabel tag is set to "never" and appearance is set to "outline".

Environment

• Angular:
• CDK/Material: v8.2.3
• Browser(s): Chrome/Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[devversion]

Thanks for submitting this issue! This seems to be the intentional behavior in the mat-form-field.

code comment from our docs:

Note: only the legacy appearance supports the `never` option. `never` was originally added as a
way to make the floating label emulate the behavior of a standard input placeholder. However
the form field now supports both floating labels and placeholders. Therefore in the non-legacy
appearances the `never` option has been disabled in favor of just using the placeholder.

In summary, if you want to have the never behavior, the recommended way is to just use placeholder instead of mat-label. I'm closing this. Happy to discuss if you think differently.

[jwittekind]

Hello @devversion,

i see, there is a technical challenge regarding the use of a placeholder and a floating label at the same time. It seems like i made a mistake. The floating label does not even get disabled when i remove the placeholder. Regardless whether a placeholder tag is set or not, the label should not be allowed to float if floatLabel is set to never. Still having a floating label when its' set to "never" is an unexpected behaviour. Also, the floatLabel="never" attribute works on the default Appearance but doesn't work when using appearance="outline" explicitly.

Actually, has there been a discussion about the labels position, when the "floatLabel" attribute is set to "never"?
My expectation would be, that a non-floating label falls back to the default behaviour of a label.
With standard HTML5 i would not place a label over an input. I would rather place it above or next to the input. That way i'm always able to use both - a placeholder and a label.
To me it looks like the floating animation has just been turned off in this case.

I'd like to reopen this issue in hope that there can be a solution for the floating label.

[devversion]

Still having a floating label when its' set to "never" is unexpected behaviour

I see what you are saying here. Though we explicitly documented why the never option only works for form-fields using the legacy appearance. We will deprecate this appearance quite soon anyway, so the never option for floatLabel will be gone.

There multiple possible ways to "describe" an mat-form-field:

1. Using mat-label with floatLabel="auto" (default)
2. Using mat-label with `floatLabel="always"
3. Using placeholder="". This is the recommended alternative to floatLabel="never"

@mmalerba We should make sure to deprecate floatLabel="never" when we deprecate the legacy/standard appearance. Can you confirm?

My expectation would be, that a non-floating label falls back to the default behaviour of a label.
With standard HTML5 i would not place a label above an input. I would rather place it above.
That wat way i'm always able to use both - a placeholder and a label.

That's an interesting point. Unless I misunderstand your point here, isn't this already possible by setting floatLabel="always" and using a placeholder. That way, you have both. A label above, and a placeholder.

[jwittekind]

Hey @devversion,

sounds good for me! Actually the floatLabel="always" option is, what i was searching for.
With that i can achieve the design i wanted.

Alos I didn't know, that the floatLabel="never" option was about to get deprecated.
Makes sense in my perspective as it is a good approach to align this with the placeholder.

Thanks for your quick responses! This issue can stay closed ;)

[angular-automatic-lock-bot]

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.}