Error when focus to element inside shadow DOM

[trungtin]

The error is here:

Failed to execute 'getComputedStyle' on 'Window'

reference: https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/host
will take a look to create MR later. Help is welcome :D 💃

[theKashey]

Not sure what is the real issue and how to reproduce it.

[trungtin]

here is the reproduce https://codesandbox.io/s/dawn-glitter-n5of7?fontsize=14

[theKashey]

When going up and checking all parents one should check for the ShadowRoot

node instanceof ShadowRoot ? node.host : node.parentNode

Related - https://github.com/chartjs/Chart.js/pull/5585/files

[emplums]

I'm dealing with this issue as well, though I'm pretty sure I'm not using the shadow DOM in my application. I'm getting these errors on the document nodes. I noticed that the conditional node === document here doesn't actually resolve to true even though it is the document node: https://github.com/theKashey/focus-lock/blob/master/src/utils/DOMutils.js#L16

So when the isVisible gets called on the document element, instead of returning true it tries to evaluate !isElementHidden(window.getComputedStyle(node, null)) an error is thrown because getComputed style expects an Element node and not a Document node.

Maybe a node.nodeType === 9 would work here? https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType

The thing that's so strange about this is that it was working before here: https://primer.style/components/docs/Dialog, in that environment the only usage of focus-lock is in @reach/dialog.

Once we added focus-lock to our project as well, it stopped working: https://primer-components-6nyrsxfvw.now.sh/components/Dialog

Could this have anything to do with competing focus-lock instances?

[theKashey]

The problem is with two different documents, and that’s something focus-lock has no powers upon.
However, then more intelligent patch for document detection, or just wrapping check in try/catch should be enough to fix the problem.

[shabailiu]

I'm getting the same issue when using react-focus-on injected into an iframe. As it's traversing up, it's making this check on the document node of the iframe. This is only an issue if there is a focus-able element (like a button) as a child of FocusOn. Here is a demo: https://codesandbox.io/embed/interesting-northcutt-t9whq

[theKashey]

Updates has been published to all packages. Not sure if does it solve ShadowDOM issue, but document is now detected via nodeType property

[shabailiu]

That was fast! Appreciate the fix, iframe detection works :)