Render/mount to a detached DOM node (#4197)

* Render/mount to a detached DOM node * Verbiage * 4.15.1
microsoft · Mar 4, 2022 · a6b3788 · a6b3788
1 parent 49cfdc1
commit a6b3788
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [4.15.1] - 2022-03-04
+
+### Fixed
+
+-  Fixes [#4196](https://github.com/microsoft/BotFramework-WebChat/issues/4196). Should render/mount to a detached DOM node without errors, by [@compulim](https://github.com/compulim), in PR [#4197](https://github.com/microsoft/BotFramework-WebChat/issues/4197)
+
 ## [4.15.0] - 2022-03-03
 
 ### Breaking changes

diff --git a/...snapshots__/html/simple-detached-js-should-render-on-a-detached-node-1-snap.png b/...snapshots__/html/simple-detached-js-should-render-on-a-detached-node-1-snap.png
diff --git a/__tests__/html/simple.detached.html b/__tests__/html/simple.detached.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <script>
+      run(async function () {
+        const container = document.createElement('div');
+
+        container.setAttribute('id', 'webchat');
+
+        WebChat.renderWebChat(
+          {
+            directLine: testHelpers.createDirectLineWithTranscript([
+              'Aliqua non sint est tempor nisi voluptate amet ipsum. Mollit do velit do eu laboris proident minim dolore non est excepteur. Enim reprehenderit aliqua nostrud adipisicing veniam consequat sit veniam id. Nisi dolore laboris dolore duis Lorem officia proident nostrud. Esse dolor nisi ad nisi est sit magna minim duis laborum.',
+              'Ex eu consectetur ut Lorem ipsum velit. Do aute aliquip esse ea. Ea voluptate velit est reprehenderit ullamco voluptate quis nisi nisi dolor. Velit do exercitation cillum proident minim. Exercitation sint cillum aliquip in. Excepteur elit veniam consectetur ea ad incididunt.',
+              'Nisi ipsum in enim et. Reprehenderit dolore proident ad id. Lorem elit incididunt aliquip sit elit pariatur sit ea aliquip officia deserunt enim incididunt. Occaecat consectetur ullamco adipisicing pariatur. Consectetur id cupidatat nulla deserunt eiusmod commodo laborum laboris laborum.',
+              'Anim fugiat quis consectetur do. Do ipsum qui commodo commodo officia. Ex qui pariatur reprehenderit aliqua consequat eu veniam laborum est mollit fugiat. Esse nisi consectetur laborum tempor cillum officia officia qui labore ipsum adipisicing.',
+              'Dolor ea labore aute culpa veniam voluptate fugiat commodo sint do aliqua aute ea. In aute commodo ex labore sint quis. Et aliquip laboris excepteur quis aliqua sit do labore eiusmod.',
+              'Exercitation amet excepteur quis ipsum officia. Occaecat dolor velit reprehenderit ullamco cillum nostrud culpa qui. Reprehenderit id cupidatat nostrud occaecat. Tempor ea exercitation aliqua non consequat officia cillum sunt.',
+              'Velit deserunt cillum sunt cupidatat fugiat culpa occaecat ipsum in esse. In commodo ut amet anim ea sint incididunt. Amet dolor laborum velit sunt velit laborum.',
+              'Sint voluptate laboris minim fugiat. Sint incididunt sit proident amet ut exercitation cillum id id culpa culpa. Mollit ad occaecat occaecat aliqua tempor anim elit commodo do. Sunt minim ut quis dolore pariatur non veniam duis Lorem labore aliquip ut.',
+              'Id occaecat tempor sit anim Lorem cupidatat officia voluptate. Laborum consectetur commodo velit aute ex. Dolore reprehenderit nostrud est ullamco aliqua irure enim. Eiusmod laborum adipisicing pariatur esse laboris consectetur nulla veniam minim dolor cupidatat excepteur. Ad tempor sint do mollit fugiat amet veniam culpa sunt cupidatat. Laboris ut labore commodo aliquip laboris laboris consequat voluptate.'
+            ]),
+            store: testHelpers.createStore()
+          },
+          container
+        );
+
+        document.body.append(container);
+
+        await pageConditions.uiConnected();
+
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/simple.detached.js b/__tests__/html/simple.detached.js
@@ -0,0 +1,3 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+test('should render on a detached node', () => runHTML('simple.detached.html'));
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-root",
-  "version": "4.15.0",
+  "version": "4.15.1",
   "private": true,
   "files": [
     "lib/**/*"

diff --git a/packages/component/src/BasicTranscript.tsx b/packages/component/src/BasicTranscript.tsx
@@ -267,16 +267,22 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
           if (scrollableElement && activityBoundingBoxElement) {
             // ESLint conflict with TypeScript. The result of getClientRects() is not an Array but DOMRectList, and cannot be destructured.
             // eslint-disable-next-line prefer-destructuring
-            const { height: activityHeight, y: activityY } = activityBoundingBoxElement.getClientRects()[0];
+            const activityBoundingBoxElementClientRect = activityBoundingBoxElement.getClientRects()[0];
 
             // ESLint conflict with TypeScript. The result of getClientRects() is not an Array but DOMRectList, and cannot be destructured.
             // eslint-disable-next-line prefer-destructuring
-            const { height: scrollableHeight } = scrollableElement.getClientRects()[0];
-            const activityOffsetTop = activityY + scrollableElement.scrollTop;
+            const scrollableElementClientRect = scrollableElement.getClientRects()[0];
 
-            const scrollTop = Math.min(activityOffsetTop, activityOffsetTop - scrollableHeight + activityHeight);
+            // If either the activity or the transcript scrollable is not on DOM, we will not scroll the view.
+            if (activityBoundingBoxElementClientRect && scrollableElementClientRect) {
+              const { height: activityHeight, y: activityY } = activityBoundingBoxElementClientRect;
+              const { height: scrollableHeight } = scrollableElementClientRect;
+              const activityOffsetTop = activityY + scrollableElement.scrollTop;
 
-            scrollToBottomScrollTo(scrollTop, { behavior });
+              const scrollTop = Math.min(activityOffsetTop, activityOffsetTop - scrollableHeight + activityHeight);
+
+              scrollToBottomScrollTo(scrollTop, { behavior });
+            }
           }
         }
       },
@@ -342,7 +348,14 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
 
         // "getClientRects()" is not returning an array, thus, it is not destructurable.
         // eslint-disable-next-line prefer-destructuring
-        const { bottom: scrollableClientBottom } = scrollableElement.getClientRects()[0];
+        const scrollableElementClientRect = scrollableElement.getClientRects()[0];
+
+        // If the scrollable is not mounted, we cannot measure which activity is in view. Thus, we will not fire any events.
+        if (!scrollableElementClientRect) {
+          return;
+        }
+
+        const { bottom: scrollableClientBottom } = scrollableElementClientRect;
 
         // Find the activity just above scroll view bottom.
         // If the scroll view is already on top, get the first activity.
@@ -352,7 +365,14 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
             ? activityElements
                 .reverse()
                 // Add subpixel tolerance
-                .find(([, element]) => element.getClientRects()[0].bottom < scrollableClientBottom + 1)
+                .find(([, element]) => {
+                  // "getClientRects()" is not returning an array, thus, it is not destructurable.
+                  // eslint-disable-next-line prefer-destructuring
+                  const elementClientRect = element.getClientRects()[0];
+
+                  // If the activity is not attached to DOM tree, we should not count it as "bottommost visible activity", as it is not visible.
+                  return elementClientRect && elementClientRect.bottom < scrollableClientBottom + 1;
+                })
             : activityElements[0]
         )?.[0];
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */

		test('should render on a detached node', () => runHTML('simple.detached.html'));