Outline form field visual bug in 6.2

[bop10]

Bug, feature request, or proposal:

mat-form-field-outline-gap and mat-form-field-outline-start classes are not styling right

What is the expected behavior?

Same behaviour as material 6.1

What is the current behavior?

When you move between routes and load a component with some form fields with values, the outline gap doenst calculate the width, so label is bad styled. When you click anywhere, the width is recalculated fine.

What are the steps to reproduce?

GIF with the problem:

What is the use-case or motivation for changing an existing behavior?

Prior to 6.2 everything worked fine

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

Angular Material 6.2

Is there anything else we should know?

Angular Material 6.1 didnt have this issue

The problem seems to be related with the width applied to mat-form-field-outline-gap and mat-form-field-outline-start classes, when the bug happens, the width is set to 0, like:

<div class="mat-form-field-outline-start" style="width: 0px;">...</div>

And then if you click anywhere:
<div class="mat-form-field-outline-start" style="width: 5.48608px;">...</div>

[mmalerba]

@bop10 Can you provide a stackblitz or minimial reproduction repo? I'm not able to reproduce it.

@crisbeto This is probably related to #11406

[bop10]

@mmalerba @crisbeto Hey, i'm not able to reproduce it in stackblitz, it's going to take me a while to find why i can't reproduce it.

In my app happens in some forms, not in every single one, but i don't know why since all my forms are similar. It has to be related with #11406, because it didn't happen in 6.1

[Joaquin-GM]

I'm having the same issue and I have not yet been able to find any solution. Would be nice If you could give us some advice.
Thanks!

[alejojimenezmp]

Same issue here.

[mmalerba]

I'm still unable to reproduce this, if anyone seeing the issue is able to reproduce on stackblitz or a minimal github repo that would help me track it down

[czeckd]

@mmalerba @crisbeto I think I have a reproducer. The problem seems to be when loading via route, the mat-form-field-outline-gap is not being calculated at all. It is set to the default 0.

Here's what I coded to reproduce it: https://stackblitz.com/edit/angular-2mcwxd

I've been able to get the no-gap behavior on Firefox, Safari, Edge, and Chrome.
The reproducer app works best when run in its own window.
.

This reproducer was done with @angular 6.0.9 and @angular/material 6.4.0.

[czeckd]

I'm using this as a base class for my form components as a temporary fix until this is resolved.

import { AfterViewInit, ChangeDetectorRef, Component, QueryList, ViewChildren }
  from '@angular/core';
import { MatFormField } from '@angular/material/form-field';

@Component({
  template: ''
})
export class FormFieldFixComponent implements AfterViewInit {
  @ViewChildren(MatFormField) formfields: QueryList<MatFormField>;

  constructor(protected cdr: ChangeDetectorRef) { }

  // This is a temporary work around for: https://github.com/angular/material2/issues/11577
  ngAfterViewInit() {
    this.formfields.forEach( (ff: MatFormField) => {
      ff.updateOutlineGap();
    });
    this.cdr.detectChanges();
  }
}

Hopefully this issue can get another look from the Material team?

[mbeckenbach]

Having the same issue. Two components using the same structure. One has the issue the other does not and I can't find a reason for it.

@czeckd Your workaround fixes it.

[mmalerba]

I think #12555 should fix this