input[text]: label does not float on iOS

[csvan]

See attached screenshot, the relevant element is this:

<label class="item item-input">
   <span class="input-label">Username</span>
   <input type="text" name="username" ng-model="authorization.username" required>
</label>

EDIT: This also affects the blue underline effect on the input element, and other animations.

[csvan]

I looked at the computed styles at runtime, and it seems that the is-dirty class never gets applied to the label on iOS. I am not familiar enough with the internals of ionic-mdl yet, but will post here if I find anything.

[csvan]

Alright, here is what happens. The relevant code is here:

https://github.com/delta98/ionic-material-design-lite/blob/1c88bbcb8a5ca6613d265c467b2c5ae1042f9b77/js/directive/input.js#L15-L22

The blur event never fires on iOS for some reason. This thread on SO may provide some clues:

http://stackoverflow.com/questions/24854032/angularjs-binding-element-to-blur-not-triggered

EDIT: It should be noted, in the context of the above, that the is-focused class is not applied either, which may be why the event does not fire.

EDIT 2: The reason is-focused is never set is because the following callback never fires. I am guessing this is an issue which goes beyond this project, but it would be interesting to know why it only work on Android:

https://github.com/delta98/ionic-material-design-lite/blob/1c88bbcb8a5ca6613d265c467b2c5ae1042f9b77/js/directive/input.js#L11-L13

[csvan]

@delta98 well if I only I had paid more attention to the code...the problem is in this line:

https://github.com/delta98/ionic-material-design-lite/blob/1c88bbcb8a5ca6613d265c467b2c5ae1042f9b77/js/directive/input.js#L2

You are listing $ionicPlatform and $ionicMaterialConfig as injectables, but only one parameter for the closure. This parameter gets bound to $ionicPlatform instead of $ionicMaterialConfig, and hence the $ionicMaterialConfig.allPlatforms check fails on iOS.

[csvan]

https://github.com/delta98/ionic-material-design-lite/pull/80

[jjaybrown]

Sorry for not being active on this thread, I've reviewed and merged the code. Platform overriding is still in it's infancy as the focus as been on Android.

[LuisMCunha]

I'm still experiencing this issue, on iOS with the following markup

   <label id="email" class="item item-input item-stacked-label  input-light">
      <span class="input-label" style="color:white;-webkit-input-placeholder:white;">Email</span>
      <input type="email" ng-model="data.email" required>
    </label>

the label stays on top of the user inserted text. Works as expected on android.