Components: Outline form field prefix wrong position

[nicholasp]

Reproduction

StackBlitz: https://stackblitz.com/edit/angular-bn3lcp

Steps to reproduce:

1. Press Random Prefix to get prefix tag text
2. See Outline form field top legend

Similar to https://github.com/angular/components/issues/15027
but its for dynamic changing text prefix

Expected Behavior

I want to make a search input with a starting (prefix) dynamic tag.

I would like either to stay the legend at starting position (top-left)
either the border to render at new position of legend

Actual Behavior

when the text of tag change i see blank space and wrong positioning to label

Environment

• Angular: 7
• CDK/Material: 7
• Browser(s): any
• Operating System: win

[fxck]

https://stackblitz.com/edit/angular-bn3lcp-ksnvaw?file=app/form-field-appearance-example.html

[nicholasp]

thanks! i will handle it with updateOutlineGap its an acceptable solution! 🎉

[tommyc38]

@nicholasp, to be clear, the solution updateOutlineGap is to a different problem. The prefix position on an outlined form field is still broken.

[tommyc38]

This issue is actually worse because matSuffix doesn't align correctly with text on an outlined form field either.

https://stackblitz.com/edit/angular-bn3lcp-czkwlj

[tommyc38]

The solution is to remove this class EXCEPT when .mat-form-field-prefix or .mat-form-field-suffix have mat-icon children. In other words, removing the css below solves the problem but creates the same issue when icons are used.

 .mat-form-field-appearance-outline .mat-form-field-prefix, .mat-form-field-appearance-outline 
 .mat-form-field-suffix {
      top: .25em;
 }

[mmalerba]

will post an update on #12803

[angular-automatic-lock-bot[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._}