Dropdown is hidden by keyboard on a mobile device

[czetsuya]

Hi,

I have a normal dropdown that works perfectly on a desktop browser, but when I access it on an Android device, the dropdown is immediately hidden and the virtual keyboard is shown. This doesn't happen on iOS devices.

I think the problem is coming from the dropdown filter. On the pop-up, the filter field gets the focus that's why the virtual keyboard is shown.

To replicate the issue, open this URL in an Android device: https://www.primefaces.org/primeng/#/dropdown and then try opening the dropdown with content filter.

Is there any workaround other than removing the filter?

Thanks.

[Paul Hornberger]

We are experiencing similar behavior with windows tablets. Is there any updates for this topic?

[slumtrimpet]

Agree... this is a pretty serious issue on Windows tablet.

[slumtrimpet]

Poking at this a bit more (and to clarify, we are seeing this bug in primevue, not primeng, but it sounds the same)...

The issue is a rogue 'resize' event being thrown.

Commenting out the 'this.hide()' resolves the issue for now (obviously it's not optimal to be ignoring resize events now, but its much less optimal to not be able to use any filtered dropdowns...)

Code: Select all

    bindResizeListener() {
      if (!this.resizeListener) {
        this.resizeListener = () => {
          if (this.overlayVisible && !DomHandler.isAndroid()) {
            // this.hide();
          }
        };
        window.addEventListener('resize', this.resizeListener);
      }
    }