md-textfloat: Inaccessible <input> element

[ajoslin]

When the developer uses md-textfloat, he/she doesn't have access to the input itself in the template.

What does that mean? It means that things like this won't work as expected:

<md-textfloat ng-blur="doSomethingOnBlur()"></md-textfloat>

This is because the ngBlur directive is listening for the blur event on the md-textfloat container element, not the inner input element itself. This will be the same for the input, focus, etc events.

Then there are input attributes that won't work:

<md-textfloat autocapitalize="off"></md-textfloat>

The developer will expect this to put the autocapitalize="off" attribute on the input, and stop auto-capitalization on mobile. But again, this attribute will stay on the container.

There are potentially hundreds of directives and attributes that could be put on the <md-textfloat> container that the developer will expect to be passed straight to the <input>. We can't manually cover them all.

Fixing This

The best way to fix this would be to use replace: true on the md-textfloat directive, then set the template to be an <input>. This would cause all of the attributes to be passed to a real native <input>.

Then we could use DOM magic to place the <label> element as a sibling, and remove the label when the input is removed.

[ajoslin]

@ThomasBurleson

[ThomasBurleson]

@ajoslin -

1. Why not just transpose (and remove from originator) all attributes from the md-text-float to the internal <input>. This way the md-text-float container still works to define bounds, ripple, transitions, etc. ?

2. By NOT replacing, we support more complex content within the md-text-float body:

<md-text-float ng-model="myValue">
  <span class="employee">{{myLabel}}</span> rocks!
</md-text-float>

---

So to combine both ideas:

<md-text-float ng-model="myValue" ng-blur="doSomethingOnBlur()" autocapitalize="off">
  <span class="employee">{{myLabel}}</span> rocks!
</md-text-float>

becomes

<md-input-group>
   <label for="">
      <span class="employee">{{myLabel}}</span> rocks!
   </label>
   <input ng-model="myValue" ng-blur="doSomethingOnBlur()" autocapitalize="off" type="">
   <md-ripple-container></md-ripple-container>
</md-input-group

[ajoslin]

I remember us talking about this before. And you're right, we decided we'd have to copy Angular's internal implementation of "copy attributes to children". We should definitely do that, then.

[marcysutton]

As long as the label and input have a valid for/id pairing, the above code should be fine. I wish there was a way to make it work with a native input element, but at least this way we can ensure there will be a valid label for every text input.