Dropdown breaks in shadowRoot when getScrollableParent() encounters document fragment

[HighTechnocrat]

There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeReact PRO Support where support is provided within 4 business hours

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

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports)

https://codesandbox.io/s/primereact-dropdown-breaks-in-shadowroot-utwe0?file=/src/index.js

Current behavior
Upon clicking the Dropdown, it briefly renders before throwing an exception:

TypeError
Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Expected behavior
Dropdown opens and does not throw an exception.

Minimal reproduction of the problem with instructions

Render the React app inside a shadowRoot, and add one Dropdown component to the app. No other specific configuration is needed (see the codesandbox I shared).

Please tell us about your environment:

Windows 10, VSCode, building using webpack and deploying to a website.

• React version:
  17.x.x - There's an issue with events in the shadowDom that's addressed in React 17, so prior versions of React won't work without additional workarounds.

• PrimeReact version:
  6.6.0

• Browser:

• Latest versions of Chrome and Firefox on Windows.

• Language:
  Typescript, ES7.

[HighTechnocrat]

I'm still encountering this issue in 7.1.0. (Sorry, it took me a while to update my packages)

utils.esm.js:665 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at overflowCheck (utils.esm.js:665)
    at Function.getScrollableParents (utils.esm.js:699)
    at ConnectedOverlayScrollHandler.bindScrollListener (utils.esm.js:1119)
    at Dropdown.bindScrollListener (dropdown.esm.js:1136)
    at Dropdown.onOverlayEntered (dropdown.esm.js:1062)
    at DropdownPanelComponent.onEntered (dropdown.esm.js:236)
    at CSSTransition.onEntered (csstransition.esm.js:157)
    at Object.CSSTransition._this.onEntered (CSSTransition.js:150)
    at Transition.js:272
    at Transition.nextCallback (Transition.js:334)

        var overflowCheck = function overflowCheck(node) {
          var styleDeclaration = node ? getComputedStyle(node) : null;
          return styleDeclaration && (overflowRegex.test(styleDeclaration.getPropertyValue('overflow')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowX')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowY')));
        };

I believe that the issue is calling getComputedStyle(node) on the document fragment. Since it's not an element, it's an invalid parameter for getComputedStyle().

If you update the sandbox I provided in the original comment to use either pricereact 7.0.0 or 7.1.0, the issue still occurs there, too.