pFocusTrap: focus stuck when ancestor of tabbable element is hidden

[mmorgan4x]

Describe the bug

When tabbing through focusable elements in pFocusTrap, focus will get stuck prior to a tabbable element whose ancestor is display:none.

Environment

Chrome

Reproducer

https://stackblitz.com/edit/github-qrz39t?file=src/app/app.component.html

Angular version

14.0.7

PrimeNG version

15.0.0-rc.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

n/a

Browser(s)

chrome

Steps to reproduce the behavior

Focus on button 2. Hit tab to go to next element. Notice how focus is stuck.

Expected behavior

Focus should go to button 4.

[mmorgan4x]

here is my SCSS polyfill when using bootstrap5 display utilities to hide

$displays: inline inline-block block grid table table-cell table-row flex inline-flex;
$tabbable: 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';

@function d-size($size) {
    $ret: ();
    @each $n in $displays {
       $ret: append($ret,'.d-'+$size+'-'+$n,'comma');
    }
    @return $ret;
}

.d-none:not(#{d-size('sm')},#{d-size('md')},#{d-size('lg')},#{d-size('xl')}) *:is(#{$tabbable}),
.d-sm-none:not(#{d-size('md')},#{d-size('lg')},#{d-size('xl')}) *:is(#{$tabbable}),
.d-md-none:not(#{d-size('lg')},#{d-size('xl')}) *:is(#{$tabbable}),
.d-lg-none:not(#{d-size('xl')}) *:is(#{$tabbable}),
.d-xl-none *:is(#{$tabbable})
{
  display: none !important; 
}

[mmorgan4x]

PR #12402

[mmorgan4x]

PR #12453