Bug in input focus on mobile about panes HOT 11 CLOSED

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

from panes.

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

from panes.

@eduboxgithub Please describe platform/browser/device

from panes.

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...

from panes.

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

from panes.

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

from panes.

@eduboxgithub Reproduced in my environment, looking for solution.

from panes.

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

from panes.

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 -/

from panes.

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

from panes.

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.

from panes.