Ionic 3 ion-input captures focus of the whole row in Android

Question

This ionic page is just a form with some elements. In the Phone field, I have created a modal that opens when you click on an image:

<ion-grid>
  <ion-row>
   <ion-col>
    <form #registerForm="ngForm" novalidate [formGroup]="form">    

      [...]

      <ion-item>
        <img item-left margin-left src={{flagPath}} (click)="presentCountryModal()">
        <p item-left (click)="presentCountryModal()">+{{countryCode}}</p>
        <ion-icon item-left name="arrow-dropdown" (click)="presentCountryModal()">
        </ion-icon>

        <ion-input
          placeholder="Phone"
          type="text"
          [(ngModel)]="account.phone" 
          name="phone"
          required
          pattern=".{8,}"
          #phone="ngModel"
          ></ion-input>
        </ion-item>

It works perfectly on iOS and Windows on ionic-lab. But in Android the behavior is different: when I click on the image, the Phone ion-input gets the focus and the whole form moves up, making space for the keyboard and hiding the field under the header.

I'd like to:

1) Be able to make the image clickable.

2) Disable the automatic scrolling when an ion-input gets focused. I've tried keyboard.disableScroll(true) with no success.

Any ideas? Thanks!

UPDATE:

As explained here, adding .input-cover { position: static; } to the scss files stabilizes the form and makes the image click event responsive! So that solves the first question.

But I still have the problem that, when the keyboard opens, the whole page moves up and the top elements hide below the header (and you can't scroll them down).

For 1) you may try by creating a row with two separate columns, one for the flag and the other for the input. For 2), please take a look at [this answer](https://stackoverflow.com/questions/41161705/ionic-2-form-goes-up-when-keyboard-shows/41163695#41163695). — sebaferreras, May 29 '17 at 05:49
I've updated my answer with a what it looks like a working solution for the first problem! Sebaferreras, I've tried what it's explained in that post, but I don't notice any change when I change keyboard.disableScroll between true and false. — EmilioSG, May 31 '17 at 02:52

score 1 · Answer 1 · answered May 29 '17 at 12:06

1) You need to make a separated ion-item form the img. If you have an ion-input inside an ion-item, everything you put together will be "part" of that input.

2) The easiest way to do this without manipulating via ts is using a regular input, not the ion-input or using the ion-input inside a div instead of the ion-item. The second one i'm just guesing, since the behaviour of the scroll for showing the keyboard happens if you have an ion-input inside ion-item.

Hope this helps :)

Ionic 3 ion-input captures focus of the whole row in Android

1 Answers1