Bug in input focus on mobile

[eduboxgithub]

Hello,

when I click the input and then open the keyboard the view is pulled all the way up, then the view does not return to normal on blur. This event makes to lose the submit button on the header.

is possible to see in the following images.

image 1
image 2
image 3

What can I do to fix this problem ?

[BerkeAras]

If you use capacitor or cordova the plugin ionic keyboard would stop pushing the content up

[roman-rr]

@eduboxgithub Please describe platform/browser/device

[eduboxgithub]

Hello @BerkeAras and @roman-rr.

I'm using Capacitor (latest version) and I'm testing on a Android device.
Already tested on a OnePlus 5T with Android 10, a Wiko with Android 7 and a Xiaomi A2 with custom ROM (LineageOS).

In all of them when a pane is rendered with an ion-input, when the native keyboard shows up (ion-input focus) the pane scrolling breaks and cant be restored...

This only happens on a device... because of the native keyboard.

If I try to block the content to be pushed up... probably I will be writing things in the input, but not seeing what is being written...

[BerkeAras]

@eduboxgithub Is the bug happening when you dont use ion-input?

[roman-rr]

@eduboxgithub please share your code and i will find optimal solution for this case.

[roman-rr]

@eduboxgithub Reproduced in my environment, looking for solution.

[roman-rr]

@eduboxgithub

Quick solution

if solve your issue, i will add to next release

if (this.platform.is('android')) {
  const pane = <HTMLElement>document.querySelector('.pane');
    window.addEventListener('keyboardWillHide', () => 
    window.requestAnimationFrame(() => (pane.style.display = 'none',
    window.requestAnimationFrame(() => pane.style.display = 'block'))));
}

More properly way

Manual mode control keyboard

ngOnInit() {
  let myPane = new CupertinoPane('ion-drawer', {
    parentElement: 'body'
  });
  myPane.present();

  let pane = <HTMLElement>document.querySelector('.pane');
  let initPos;
  window.addEventListener('keyboardWillShow', (e: any) => {
    initPos = this.getPaneTransformY();
    pane.style.transform = `translateY(${this.getPaneTransformY() - e.keyboardHeight}px) translateZ(0px)`;
  });
  window.addEventListener('keyboardWillHide', (e: any) => {
    pane.style.transform = `translateY(${initPos}px) translateZ(0px)`;
  });
}

getPaneTransformY = (): number => {
  const translateYRegex = /\.*translateY\((.*)px\)/i;
  return parseFloat(translateYRegex.exec((<any>document.querySelector('.pane')).style.transform)[1]);
}

For perfect experience you can additionally check that focused input contains in Pane element and check that bottom offset to focused input less than keyboard height.

[nbaleli-w]

I wonder if this can be achieved in a browser as well?
I currently have an input in the drawer and the virtual keyboard is hiding it -/

[roman-rr]

@nbaleli-w please describe your issue here #73
Seems like it's match.

[Nickholas]

Borried looking for a solution, i did this and works 100% on any device:

On .html:

<ion-item>
                    <ion-label position="floating">Días disponibles</ion-label>
                    <ion-input formControlName="dias" type="number" class="number-input" readonly='true' (ionFocus)="changeDiasDisponible()"></ion-input>
                </ion-item>

On .ts:

async changeDiasDisponible() {
    const alert = await this.alertController.create({
      header: 'Nº días disponibles',
      inputs: [
        {
          name: 'numdias',
          type: 'number',
          value: this.form.get('dias').value
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary'
        }, {
          text: 'Ok',
          handler: (data: any) => {
            this.form.get('dias').patchValue(data.numdias);
          }
        }
      ]
    });
    await alert.present();
  }

[alleneben]

Hello, when I focus in an input on android, style="overflow: hidden" is injected into my pages html tag. This prevents me from scrolling the page.

How do I fix this.