Focus of Draft.js within Shadow DOM

[wildhoney]

Focus of Draft.js within Shadow DOM

[Wildhoney]

By stepping through the stack trace I can see that it's traversing up the DOM until it finds x.ownerDocument.body which it will never be able to do being under a shadow boundary.

You can see above what it's trying to do — Draft is essentially traversing upwards to find the first element is encounters that has an overflow of either auto or scroll:

You can fix with unknown consequences by applying the requested overflow on an element inside the shadow boundary, so it doesn't need to keep traversing until it finds the x.ownerDocument.body element:

<div style={{ overflow: 'scroll' }}>

See line #18 in the updated JSFiddle and notice how the focus now works without throwing errors.

Nevertheless, when you type in the div it throws more errors, and by stepping through the stack trace of that error you can see it's caused by the findAncestorOffsetKey method:

You can see that the method is expecting to stop traversing once it finds the doument.documentElement node, which again because you've nested it under a shadow boundary, it will never be able to do.

Conclusion? You could attempt to find workarounds, but I think the problem essentially lies in the way Draft is written. It's simply making too many assumptions that it's always able to access either document.documentElement or x.ownerDocument.body which because of the nature of shadow boundaries, that just isn't true.

[michaelcox]

Thanks a lot for the super detailed response @Wildhoney. I'm going to close out this ticket as there's obviously nothing that can be done in this library. But I'm going to use what you've taught me here to try to come up with a workaround myself. Or (ugh) see if I can get some changes into Draft to support this use case better.