Can't select text input

Ionic Framework ionic-v3
1

Hello!.
I have a form with many options. Everything it’s working fine, but the two text inputs are not working properly.

I can only select them one time and then they get blocked…

This is part of my code.

<ion-card class="card_header">
    <ion-card-header>
      {{productName}}
    </ion-card-header>
    <ion-list>
      <ion-item>
        <ion-label fixed>Price$</ion-label>
        <ion-input type="number" placeholder="Price" [(ngModel)]="shopPrice"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label fixed>SKU</ion-label>
        <ion-input type="text" placeholder="SKU" [(ngModel)]="skuComp"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Worked</ion-label>
        <ion-checkbox [(ngModel)]="workedCheck"></ion-checkbox>
      </ion-item>
      <ion-item>
        <ion-label>No shopping</ion-label>
        <ion-checkbox [(ngModel)]="noShopCheck"></ion-checkbox>
      </ion-item>
      <ion-item>
        <ion-label>Same price</ion-label>
        <ion-checkbox [(ngModel)]="samePriceCheck"></ion-checkbox>
      </ion-item>
    </ion-list>
  </ion-card>

Thanks!

2

In the login page I have the same issue… I can only select 1 or 2 times and the text inputs gets blocked

<ion-header>
  <ion-navbar class="navBar" color="light">
    <ion-title>
      Shopping
    </ion-title>
  </ion-navbar>
  <ion-toolbar color="primary">
    <ion-title>
      Inicio de sesión
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>


  <ion-card>
    <ion-list inset>
      <ion-item>
        <ion-input type="text" placeholder="User"></ion-input>
      </ion-item>
      <ion-item>
        <ion-input type="password" placeholder="Pass"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label class="labelOff">Offline mode</ion-label>
        <ion-toggle class="toggleOff" [(ngModel)]="isToggled" (ionChange)="notify()"></ion-toggle>
      </ion-item>
    </ion-list>
    <button ion-button block strong color="danger" (click)="goToShoppingPage()">
            Login
    </button>
  </ion-card>
</ion-content>

<ion-footer>
  <button class="Parameters" ion-button block strong color="gris" [navPush]="parametrosPage">
        Parámetros
</button>
</ion-footer>

thanks in advance!
3

Hey guys, thanks for reading.

The problems is the
If I remove the ion-item, I can select many times the ion-input.
Is there any way to solve this?

Thanks

4

I am having the same issue. Ion-input can only be selected one time if its inside an ion-item, then is just blocked.

5

i am having the same issue, Some workaround??

6

I had a similar issue on Android but not iPhone after selecting, then deselecting an <ion-input> it would not let me reselect. Inspecting the HTML, I saw that there was a <div> blocking the input element with the class .input-cover. I solved this by adding this to my app.scss:

.input-cover {
  pointer-events: auto;
}
4 Likes