Overlay panel component with input text gets closed when soft keyboard appears in Android devices

[drtone]

Has anyone of you experienced this issue with the p-overlayPanel component from PrimeNg? I have a very simple panel with an text input inside, set with dismissable=false so it can't be closed by tapping in the rest of the page.

Everytime that the overlay opens and the input gains focus, the Android soft keyboard appears and it closes the overlay right away. I have checked that this only happens in Android (in iOs and W10 it works good). I have also tried in three different browsers (Chrome, Firefox and Duck Duck Go) over two Android devices with the same result.

Here is a small stackblitz that I have put together taking one of the documentation examples as a basis. Please check in Android to reproduce the annoying issue. Any help, comment or suggestion will be more than welcome as I'm not sure what to do to fix this.

Thanks!

[drtone]

Nobody?

[lakshmijayaram]

I have the same issue on android mobile. Have you got any fixes for this?

[kroni]

Hello

I had the same issue and have since figured out that the "hiding" of the overlay panel is triggered by a resize event which is bound in the onAnimationStart function of primeng-overlaypanel.js.
I have a directive for p-overlaypanel in the constructor of which I can check for the device (ngx-device-detector) and if it's an Android I can overwrite the bindDocumentResizeListener() function.

Code: Select all

constructor(public op: OverlayPanel,
	    private deviceService: DeviceDetectorService) {
    this.deviceService.getDeviceInfo();
    if (this.deviceService.device === 'Android') {
      op.bindDocumentResizeListener = () => {};
    }
  }

I hope this helps a bit.