p-checkbox causes layout issues when used inside an overflow: auto div

[KiranChinnam]

If you have a PrimeNG PRO Support subscription please post your issue at;

https://pro.primefaces.org

where our team will respond within 4 business hours.

If you do not have a PrimeNG PRO Support subscription, fill-in the report below. Please note that
your issue will be added to the waiting list of community issues and will be reviewed on a first-come first-serve basis, as a result, the support team is unable to guarantee a specific schedule on when it will be reviewed. Thank you for your understanding.

Current Queue Time for Review
Without PRO Support: ~8-12 weeks.
With PRO Support: 1 hour

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/edit/primeng-checkbox-flex-issue

Current behavior

When the checkbox is used in a div with overflow:auto and requires scrolling in the div to make the checkbox visible, extra space is added at the bottom of the page. When the checkbox is clicked, the page jumps.

Expected behavior
No extra space, and page should not scroll on interaction with the checkbox.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?
Checkbox does not work if using overflow: auto to create scrollable panels.

• Angular version: 11.x (latest)

• PrimeNG version: 11.x

• Browser: Chrome 87, Edge 87

• Language: TS 4.03

[john8329]

YES! I've been looking into this for hours. This still happens with PrimeNG LTS 10.1.0, and it's a blocking issue. I can confirm #9726 fixes the problem.

[KiranChinnam]

I've worked around this issue by setting the display property in the global styles.scss

.p-hidden-accessible{ display: none; }

[PeterHewat]

The .p-hidden-accessible{ display: none; } hack introduces another issue:
It prevents a p-dropdown to get the focus.
Here is the p-dropdown example from the documentation to show you:
https://stackblitz.com/edit/primeng-dropdown-demo-p-hidden-accessible-focus-issue?file=src/app/app.component.scss
Only the "Editable" dropdown is focusable because it has an input so that you can edit... that is focus-able.

[KiranChinnam]

@PeterHewat Thanks for testing this. The other method I used was to set position: initial; instead (see original repro Stackblitz). This doesn't seem to exhibit the same focusing issue. I'll update the PR later.

[PeterHewat]

@KiranChinnam Thanks, position: initial; does indeed fix the issues I was having.

[PeterHewat]

position: initial; unfortunately also introduces other layout issues such as in certain circumstances, p-inputSwitch are moved below there expected position.