Table filter menu does not work on mobile, closes virtual menu

[thiagolopes-dev]

Current behavior
When using the table filter menu on mobile, it closes the virtual keyboard

Expected behavior
The correct behavior was to keep the virtual keyboard open

Minimal reproduction of the problem with instructions
Using the table without responsive mode we were able to check the bug in the table, clicking on the filter quickly opens and closes the virtual keyboard.

https://stackblitz.com/edit/primeng-tablefilter-demo-ltcvgh?file=src/app/app.component.ts

• Angular version:
  13.2.3
• PrimeNG version: 5.X
  13.3.3
• Browser:
  Chrome 101X
  Please tell us about your environment:
  Ubuntu 22.04

[cetincakiroglu]

Hi,

I couldn't replicate the problem. Could you please give some instructions?

Regards

[thiagolopes-dev]

Hi, to replicate the problem open the stackblitz link on the mobile and click on preview, you will see that clicking on the filter opens the keyboard, right after it closes, then it is not possible to do the search.

you can check this link I recorded the screen to replicate the bug:
https://1drv.ms/v/s!AkUtqKpFOWwGguw3PHF_ZeyDuSlVPQ

[edilsonmendes]

Hi @cetincakiroglu, it is possible to easily reproduce the error on android devices, including in the official table filer example (https://www.primefaces.org/primeng/showcase/#/table/filter).

The root cause is OverlayPanel component. Since the table filters in the mode menu are displayed in an overlay panel. The problem details was extracted from #11401:

"If an OverlayPanel contains an input element (like a text field), the OverlayPanel is closed when clicking into the text field. The behavior is caused by the onWindowResize() event handler method inside the overlaypanel.ts. When clicking into an input element, the mobiles keyboard is shown, causing a resize of the mobile browser window. The onWindowResize() event handler method is called, which closes the OverlayPanel, and the also the keyboard is hidden again, because the input element isn't focused anymore (due to it being hidden)."

The same issue was fixed in dropdown and multiselect #7030 checking if is android device before call hide() function and could also be used in overlaypanel:

// dropdown.ts
// correct behaviour
onWindowResize() {
    if (!DomHandler.isAndroid()) {
        this.hide();
    }
}

// overlaypanel.ts
// wrong behaviour, should call hide only if is not an Android device
onWindowResize(event) {
    this.hide();
}

@th14go , as workaround, #7260 @BlackfootPL created a directive that blocks the 'resize' event on mobile devices. See https://stackblitz.com/edit/primeng-mobile-dropdown-fix

Some other related issues: #11401 and #7260.

[mertsincan]

Duplicate of 11567

[thiagolopes-dev]

The problem was solved ?

[mertsincan]

Yes, fixed with 2908cf3#diff-54f9fcc81f3c7d880cfe5f7ddd5dda1e60f15581a7ce88dd922b0586b1f259a1R4797

[thiagolopes-dev]

@mertsincan wonder !, Thanks, how do i get this fix, i'm on primeng 13.3.3 ?

[mertsincan]

@mertsincan wonder !, Thanks, how do i get this fix, i'm on primeng 13.3.3 ?

Unfortunately, you need to wait for the next release.

[developeruptown]

@mertsincan wonder !, Thanks, how do i get this fix, i'm on primeng 13.3.3 ?

You sure can do it,
here is how you do it.
1)You Fork Primeng
2) Make appropriate changes
3) Remove Primeng from your package.
4) install package using your (updated)forked package to your project.
here are more details.
Step 1 and 2
https://stackoverflow.com/questions/53879891/replacing-file-from-node-modules
Step 3 and 4
https://stackoverflow.com/questions/40528053/npm-install-and-build-of-forked-github-repo