Random iOS input being added

Ionic Framework ionic-v3
1

You can see in my markup, an ion-item containing an ion-label and ion-input creates a second input when deployed to an iOS device.

This does not happen in the browser or on Android, however on iOS is adds a visible input that renders on the screen. Very annoying.

Any ideas?

image
Screen Shot 2016-08-03 at 14.38.30.png1800×582 144 KB

2

This is on purpose. With text inputs, there’s so much that could happen that we clone the input you’ve added, and throw it off screen. This will make sure we can keep a consistent behavior between what the user expects and how the platform will handle things. It’s safe to ignore!

3

There’s an issue for me here then which is that I have changed some css and can actually see this input. Do I just need to re-position it off-screen to avoid the problem?

Or will the [next-input] still work if I set opacity: 0 ? I tried this in the debugger and it successfully hides it but not sure if this will affect it’s behaviour?

image

4

Can you share the relevant css and markup?

5

It is basically what you can see in the html screenshot above - It is just an ion-item inside an ion-card > ion-list[inset]

It also has a button in the item which uses item-right for positioning

 <ion-item>
      <ion-label>
        Quantity
      </ion-label>
      <ion-input class="basket-item-quantity-input" type="number" [(ngModel)]="item.product.editableQuantityInBasket"></ion-input>
      <button outline small item-right (click)="updateBasketQuantity(item.product)">Update</button>
 </ion-item>


.item-input {
  padding-left: 16px;

  ion-label {
    font-size: 1.3rem;
  }

  input {
    border: 1px solid #c8c7cc;
    padding: 3px;
  }
}
6 
[next-input] {
  opacity: 0;  
}

…seems to fix it. Should that be okay?

7

for those who are fighting with these type of problems nowdays :slight_smile:

I had to use

.cloned-input {
opacity: 0;
}

in my app.scss (never again anywhere in the app) to fix my ion-input fields in an ion-modal. otherwise the clones would appear and enlarge the modal horizontally