mdInput + mdInputContainer: Floating labels "zooming" on page load

[nathanmarks]

Having an issue where labels are zooming when the form input components are initialized.

The form is not being rendered until the object containing the model is available, so the ng-model values are available immediately.

For eg:

<md-input-container flex>
  <label>Length (months)</label>
  <input
  type="number"
  name="length"
  ng-model="vm.plan.length"
  >
</md-input-container>

Is resulting in the label "zooming" out to it's floating position when the component is created.

I can switch between routes in an app to watch this happening to the same view over and over again.

[langdonx]

With what you've described, it doesn't seem like your data is available when the view is being rendered. I'm assuming you're showing your view immediately, but then loading/setting your data asynchronously, in which case there's nothing the framework can do to know your intention.

With that assumption, I've replicated your issue: http://jsfiddle.net/xLog1bdc/

I would recommend either pre-populating vm.plan.length with a non-visible value (http://jsfiddle.net/xLog1bdc/1/), or better yet, hiding/masking the entire view or specific fields until the data has loaded (http://jsfiddle.net/xLog1bdc/2/).

[langdonx]

I'm actually seeing this now as well...

http://jsfiddle.net/langdonx/nbzds24y/

It happens in Chrome Stable+Canary+Firefox40, but not IE11. It seems to be a race condition and more likely to happen the larger the form is. Right now if I click Run over and over on that fiddle, I see it. The other day I did not.

I wrapped a ~gross hack around it for now... in ContainerCtrl:

function ContainerCtrl($scope, $element, $attrs) {
  var self = this,
      label = $element.find('label'); // hack starts here

  if (label && label[0]) {
    label[0].style.transitionDuration = '0s';

    setTimeout(function() {
      label[0].style.transitionDuration = '';
    }, 250);
  }

  // ...

[topherfangio]

Just to clarify and make sure I understand: when the form input already has a value, the floating label is currently animating from the "placeholder" position to the "floating label" position and you don't want that because it looks odd on page/view load?

Based on the current spec, I believe this is a bug, but will confirm with the team.

[langdonx]

Yes, nothing more than "it looks odd". My fiddle can be fixed with an ngCloak on the root div as well.

[nathanmarks]

@topherfangio @langdonx Correct, it's purely a visual oddity/distraction. I've had comments about it from some of our users (using this for an internal tool).

It has to be a bug -- from a UX perspective it is barmy.