bug: Floating label overlaps invalid input in Safari

[TonySpegel]

Bug Report

Ionic version: 4.x

Current behavior: When using a number input in combination with a floating label the label overlaps with the input when typing in a value such as 10. It's pretty much this: https://github.com/ionic-team/ionic/issues/10453

Expected behavior: The label should stay on top when the input is invalid

Steps to reproduce: Create a small form like this:

<form
      (submit)="onSubmit($event, settingsForm)"
      [formGroup]="userForm"
      class="zns-form"
  >
      <ion-list>
          <ion-item>
              <ion-label position="floating">nope</ion-label>
              <ion-input
                  formControlName="age"
                  step="1"
                  type="number"
              >
              </ion-input>
          </ion-item>
      </ion-list>
  </form>

type in a value such as 10. an leave the input

Related code:

StackBlitz (https://stackblitz.com/edit/ionic-v4-wmwhow?file=src%2Fapp%2Fapp.component.html)

[brandyscarney]

Thanks for the issue! What version are you using? The Stackblitz provided is using:

"@ionic/angular": "4.0.0-beta.7"

This is a really old version released 8 months ago, our latest production version is 4.3.1. We have some release notes up now for our latest production version: https://ionicframework.com/docs/release-notes.

I'm also not able to reproduce this in the provided Stackblitz:

Could you please provide a minimal code example for us to reproduce on latest? Thanks!

[TonySpegel]

Hi, this is weird, using the same Stackblitz with 4.0.0-beta.7 running on Chrome 74.0.3729.131 with a German Keyboard Layout I can reproduce my Bug: sorry for the smalish gif, hope it works as an example. The same applies for 4.0.0 (which we are using in our Product). I couldn't use 4.3.1 with Stackblitz for unknown reasons

[wendyvelie]

I'm having a similar issue, using @ionic/angular version 4.1.0. I can repro with the Stackblitz above by entering "10.0.0", but not with "10.0."

[sean-perkins]

Tested against v6 and confirmed this issue still exists, only present in Safari.

Created a new reproduction (based on the v4 example): https://github.com/sean-perkins/gh-18037-ng-floating-label

Reproduction notes:

• .item-has-value class is not applied to parent ion-item in Safari
• As a result the transform style is not overruled, translating the label 96% on the vertical axis (overlapping the input)

Issue is only present in Safari. Safari does not prevent invalid input into type="number". For instance, you can enter "10.0.0" into a type input, but in chrome you can only enter "10.0". This is true of the browser input as well. As a result, once you enter an invalid value into an input[type="number"], the value becomes "" and the resulting classes for styling are removed.

[liamdebeasi]

Thanks for the report. In Ionic 7 we are introducing a new syntax for working with form components such as ion-input. One of the benefits of this change is that it resolves the reported issue here. I am going to close this since the work to resolve this issue has been completed. We will have a public beta testing period for Ionic 7 in the future. You can learn more about the ion-input changes here: https://github.com/ionic-team/ionic-framework/discussions/25661

Please let me know if you have any questions.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.