mdTextFloat does not revert to original state when form is submitted.

[rjralgar]

If there is an md-text-float element in a form and the form is submitted via an angular ng-submit that then clears the form, the label elements remain floated about the input even though they are empty.

[PaulMougel]

That looks like a focus issue to me: as the focus on the input isn't lost, the label doesn't move. Maybe @marcysutton has an opinion on this, accessibility seems to be relevant to this issue.

In the following screencast, I first submit the form by clicking on the submit button; on the second try I press Tab and then Enter; on the third try I submit the form by directly pressing Enter.

Relevant Plunker, angular-material v0.6.1-master-d192083, and source code:

<form ng-submit="resetName()">
  <md-text-float ng-model="name" label="Name"></md-text-float>
  <md-button role="submit">Submit</md-button>
</form>

$scope.resetName = function () {
  $scope.name = ''
}

[rjralgar]

The issue I had was that I have an array of people I want to push a new person to:

people = [
    {'firstName': 'Joe', 'lastName': 'Bloggs'},
    {'firstName': 'John', 'lastName': 'Smith'}
]

And a form that submits the user

<form ng-submit="resetName()">
  <md-text-float ng-model="user.firstName" label="Name"></md-text-float>
  <md-text-float ng-model="user.lastName" label="Name"></md-text-float>
  <md-button role="submit">Submit</md-button>
</form>

With a submit that adds to the array and resets as an empty object

$scope.resetName = function () {
  people.push($scope.user);
  $scope.user = {}
}

This means the input fields are cleared but the labels remain floated. However if I modify the new empty user as below then it works properly and the label returns to the input.

$scope.resetName = function () {
  people.push($scope.user);
  $scope.user = {'firstName: '', 'lastName': ''}
}

This is fine to change in my code, but I would rather not have to make these empty strings explicit.

[marcysutton]

@rjralgar are multiple labels staying floated after submit, or just the one that has focus? The former sounds like a bug; the latter seems by design (and up to each developer to handle). To reset the label when a form is cleared, focus management could be used to send focus somewhere else: perhaps a success message. It's difficult to know where to send focus in every scenario (thereby blurring the input), so I'm not sure that it's the responsibility of Angular Material to handle it. But if we find a common pattern that proves otherwise, we can certainly take a look at it.

Meanwhile, can you provide a Plunkr showing your exact setup so we can test the multiple label float thing?

[chrismorgan-hb]

I forked @PaulMougel's Plunkr here: http://plnkr.co/edit/qiK6hi0zThZUCDewf7Oh?p=preview and I can make this happen if I don't explicitly clear each field but rather clear the object itself. I'm relatively new to JS in general, so it's possible I'm just Doing It Wrong. Let me know how I can help.