Ion-input does not work propperly

Hello everybody,

I’m having an annoying problem with my ion-inputs. It doesn’t matter if the input is inside or outside a form, they just doesn’t work. I know it’s an ion-input problem because when I test it on a traditional <input> html tag it works as expected.

The problem is that when I try to write something inside an ion-input, first it looks like double

Then, when I try to write something inside an ion-input, it looks like this, the blanc space are letters that doesn’t apear en the input. They apear when I get out of the input.

When I erase delete some text, nothing seems deleted, only when tap out the input. The marker gets back but all the text is still written.

I am guessing that the problem is because of the version, but I’m kind of confused about what should I update. Here is my package.json.

{
  "name": "         ",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.1.0",
    "@angular/compiler": "4.1.0",
    "@angular/compiler-cli": "4.1.0",
    "@angular/core": "4.1.0",
    "@angular/forms": "4.1.0",
    "@angular/http": "4.1.0",
    "@angular/platform-browser": "4.1.0",
    "@angular/platform-browser-dynamic": "4.1.0",
    "@ionic-native/barcode-scanner": "^4.1.0",
    "@ionic-native/core": "^3.7.0",
    "@ionic-native/splash-screen": "3.7.0",
    "@ionic-native/status-bar": "3.7.0",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.10"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.7",
    "@ionic/cli-plugin-cordova": "1.6.2",
    "@ionic/cli-plugin-ionic-angular": "1.4.1",
    "typescript": "2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
}

By the way, it works perfectly on a web browser, ionic serve doesn’t return an error.

Thanks!

Please post the HTML markup from the view in question.

Here is my .html

<form [formGroup] = "aForm" (ngSubmit) = "onSubmit ()">
  <ion-input placeholder = "email" formControlName = "email" type = "email"></ion-input>
  <ion-input placeholder = "password" formControlName = "password" type = "password"></ion-input>
  <button class = "login" type = "submit">Login</button>
</form>

If I set an <ion-input> out of the form the same problem happens.

When I enter a bare <ion-input> without style, the same problems happens as well.

The problem lies outside of what you have posted, because I drop that into a scratch project and it works as expected.

I can imagine, but what could be the problem? Any ideas?

Could you try with row ?
Here you can look this code. How to use rows

<ion-content overflow-scroll=”false” *ngIf="case" class="home-back-ground">
  <ion-grid>
  <form #form="ngForm" (ngSubmit)="logForm(form)" novalidate>

    <ion-row>
      <ion-col col-12>
        <img  src="assets/images/yourlogo.png" class="logo" />
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col col-12>
        <ion-item>
            <ion-input type="text" name="userName" required ngModel placeholder="Kullanıcı adı"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <ion-item>
          <ion-input type="password" name="userPassword" required ngModel placeholder="Şifre" ></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col col-12>
        <button
        ion-button
        type="submit"
        block
        class="login"
        [disabled] = "!form.valid"
        >Giriş Yap</button>
      </ion-col>
    </ion-row>
    <ion-row>
        <ion-col col-12 text-center>
          <p  class="or" >Veya</p>
          <p (click)="change()"  class="switch">Üye Ol</p>
        </ion-col>
    </ion-row>
</form>
</ion-grid>

</ion-content>

Why would that work? That’s just a container. I tried anyways, doesn’t work.

Thanks for your reply.

I finally found the problem, not the solution though.

The one thing that is causing the issue is the div y have right above the <ion-input>.

<div class = "title">
  <h1>title</h1>
</div>
<form [formGroup] = "aForm" (ngSubmit) = "onSubmit ()">
  <ion-input placeholder = "email" formControlName = "email" type = "email"></ion-input>
  <ion-input placeholder = "password" formControlName = "password" type = "password"></ion-input>
  <button class = "login" type = "submit">Login</button>
</form>

On my css:

div.title {
  position: relative;
  margin-left: 2.5%;
  margin-top: 10vh;
  height: auto;
  width: auto;
}

ion-input[type=email] {
  width: 95%;
  height: 20%;
  margin-top: 10%;
  margin-left: 5%;
}

Apparently the div is covering the input I don’t exactly know why.

Could you test it and tell me if you have the same problem?

Thanks.

I don’t see any covering (or any sign of the issues in the OP). It’s not exactly pretty, but everything’s visible for me. I just threw this into the “home” page of a tabs project:

In order to get the problem you have to simulate with the screen keyboard and write something, you’ll see that only the first letter is going to be printed, the rest is not going to work.

By the way, I’m testing on iOS, I haven’t test it on Android yet.

hello !
have you found the solution yet?

You need to wrap it in an ion-item and then you need to set ion-item background to transparent and add border and background to the input inside ion-input. Why you do not debug the html first and try to add css in chrome devtools before asking here :wink:

@leonardoss , I tried what you said, but that didn’t seem to work.

I’m running into the same issue. Any other details you can give? I assume when you say “wrap it”, it is referring to the input? Or did you mean the div?

Anyone else have a solution?

Thanks!

@RaulGM, I have the exact same symptoms, though I don’t have a div directly in the html, it’s inside a component. Were you able to fix the issue?

I found a fix for this issue on a different thread:

-webkit-transform: translateZ(0px) on each affected input.

2 Likes

In my case input on login screen was not editable until I click or touch any other element on this screen. For me reducing .input-cover height -width worked.

.input-cover {
width: 0px;
height: 0px;
}

4 Likes

This worked for me to thanks

Thanksssssssssss, the same thing happened to me