search

theKashey / react-remove-scroll

Removes and disables 📜in a "React" way
MIT License
804 stars 31 forks source link

"Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'." when placed inside a shadow root #108

Closed PottyZA closed 5 months ago

PottyZA commented 6 months ago

Similar to #89, if the <RemoveScroll> component is used inside a shadow root, the code inside elementCanBeScrolled can sometimes fail with the error message: 

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

For example, when using @radix-ui/react-dialog (version 1.0.6-rc.5), which uses react-remove-scroll@2.5.7 (the error also occurs if you force 2.5.9), if you attempt to scroll inside a shadow root when scrolling should be disabled (ie. if the content is not overflowing), then the error above is raised.

This could possibly be due to the shadow root not being an actual element. After some testing, it appears that this can be fixed by adding the following code to elementCanBeScrolled():

if (!(node instanceof HTMLElement)) return false
theKashey commented 5 months ago

v2.5.10 was released with the fix.

However, I need to point out that the code responsible for the same behaviour was already in place, including a use case in a storybook representing "lock in a shadow dom" example.

I failed to reproduce the problem and it's unclear what exactly is happening here. parameter 1 is not of type 'Element', but it's not ShadowRoot as well. Only you can confirm the fix and clarify the original problem.