Render/mount to a detached DOM node

[compulim]

Fixes #4196.

Changelog Entry

Fixed

• Fixes #4196. Should able to render/mount to a detached DOM node, by @compulim, in PR #4197

Description

When rendering Web Chat to a detached DOM node, it should not break.

The following code should work.

const container = document.createElement('div');

window.WebChat.renderWebChat(
  {
    directLine: window.WebChat.createDirectLine({ token })
  },
  container
);

document.body.append(container);

We could not catch this during release testing as all of our samples and testing sites did not render Web Chat on a detached node.

Design

In our transcript fix (#4108), we started using getClientRects() to compute the bounding boxes.

However, when Web Chat is rendered/mounted to a detached DOM node, getClientRects() will return an empty array. We assumed it always return an array with at least one instance.

Thus, getClientsRects()[0].bottom would throw an exception saying it could not access bottom of undefined.

We looked at our production codebase and found only BasicTranscript.tsx will call getClientRects(). We have protected all instances.

Specific Changes

• Add test to make sure rendering to detached DOM node is working
• Update BasicTranscript.tsx to protect all getClientRects() against rendering on detached DOM node
• Bump to 4.15.1 as this is considered QFE

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)