Repository navigation
Throw in renderWebChat() on React 16 for an element inside a shadow root - #5982
Conversation
React 16 listens to events on the document unless the container is a document or a document fragment. Inside a shadow root, the document gets events retargeted to the shadow host, so the bundled React DOM 16.8.6 ignored every click and keystroke. renderWebChat() now renders a hidden portal into the shadow root with a no-op handler for every React 16 event, so React 16 also listens on the shadow root.
The carousel of suggested actions put its react-film styles into the document head, so suggested actions inside a shadow root lost their carousel layout and showed a list bullet.
Eugene (OEvgeny)
changed the title
| ); | ||
| } | ||
|
|
||
| const rootNode = elementOrRoot.getRootNode?.(); |
There was a problem hiding this comment.
Does this trip the check if passed the element's shadow root where the element is already inside another shadow root?
There was a problem hiding this comment.
No: ShadowRoot.getRootNode() returns the shadow root itself however deep its host is nested, so rootNode === elementOrRoot skips the check, and React 16 listens on that inner shadow root, where the events bubble. I tested it locally rather than pushing onto the approved head: a unit test (nested shadow root renders, an element inside it throws) and an html2 test rendering into a shadow root nested in another one that types, sends and clicks a suggested action (3 of 3 runs, same snapshots as the non-nested test; an element inside that shadow root throws, and with the check bypassed it ignores typing as expected); I can send both as a follow-up after this merges.
Changelog Entry
Changed
renderWebChat()on React 16 throw for an element inside a shadow root, where clicks and typing were ignored, related to #5315, in PR #5982, by @OEvgenyDescription
On React 16, the default in
webchat.js, Web Chat in an element inside a shadow root ignored every click and keystroke: React 16 listens on the document, which sees the shadow host as the target.renderWebChat()now throws there, suggesting the shadow root or React 17+.Design
<ReactWebChat>rendered by the host on React 16.Specific Changes
renderWebChat.tsx: throw on React 16 for an element inside a shadow rootSuggestedActions.tsx: passstylesRootto the carousel, unstyled in a shadow rootcustomElement/shadowRoot.react16.throw.html: the error, then rendered into the shadow rootcustomElement/shadowRoot.html: React 18 instead of 16shadowRoot.interact.renderIntoShadowRoot.html(React 16),shadowRoot.interact.react18.html: type and send, click a suggested actionI have added tests and executed them locally
I have added
.changelog/<PR#>-<slug>.mdI have updated documentation
Review Checklist
z-index)package.jsonandpackage-lock.jsonreviewed