Ion-input does not work propperly

RaulGM · August 14, 2017, 5:14pm

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!

ccdex_chris · August 14, 2017, 8:29pm

Please post the HTML markup from the view in question.

RaulGM · August 14, 2017, 8:44pm

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.

rapropos · August 14, 2017, 8:50pm

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

RaulGM · August 14, 2017, 9:01pm

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

reliy0n · August 14, 2017, 9:05pm

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>

RaulGM · August 15, 2017, 2:15pm

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

Thanks for your reply.

RaulGM · August 18, 2017, 9:59pm

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.

rapropos · August 18, 2017, 10:05pm

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:

RaulGM · August 18, 2017, 10:11pm

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.

ghjjghjgbbv · February 6, 2018, 12:29pm

hello !
have you found the solution yet?

leonardoss · February 6, 2018, 4:42pm

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

uniphonic · August 29, 2018, 8:17pm

@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!

uniphonic · August 29, 2018, 8:33pm

@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?

uniphonic · August 31, 2018, 8:29pm

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

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

vats28 · August 12, 2019, 10:00am

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;
}

aidpass · January 23, 2020, 2:38pm

This worked for me to thanks

alvarosinmarca · April 4, 2020, 1:10am

Thanksssssssssss, the same thing happened to me

Topic		Replies	Views
Ion Input is not working correctly ionic-v3	0	509	October 7, 2017
Ion input does not work ionic-v3	4	900	July 19, 2021
Ionic input text not visible ionic-v1	29	8968	August 29, 2018
Ion-input type does not work Ionic Framework	1	476	July 19, 2021
Strange problem with <ion-input> ionic-v3	5	496	July 19, 2021

Ion-input does not work propperly

Related topics