fix(tooltip): handle body removal (#1131)

Refinitiv · Mar 28, 2024 · 347f98e · 347f98e
1 parent fbd717c
commit 347f98e
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/demo-block/src/demo-block.ts b/packages/demo-block/src/demo-block.ts
@@ -109,9 +109,9 @@ versionTag.style.marginLeft = '8px';
 versionTag.style.color = '#334BFF';
 themeLabel.appendChild(versionTag);
 
-document.body.appendChild(nextBtn);
-document.body.appendChild(prevBtn);
-document.body.appendChild(themeLabel);
+document.body?.appendChild(nextBtn);
+document.body?.appendChild(prevBtn);
+document.body?.appendChild(themeLabel);
 
 @customElement('demo-block', { theme: false })
 export class DemoBlock extends BasicElement {

diff --git a/packages/elements/src/overlay/managers/interaction-lock-manager.ts b/packages/elements/src/overlay/managers/interaction-lock-manager.ts
@@ -166,8 +166,8 @@ export class ScrollLockManager {
       this.scrollLeft = document.scrollingElement.scrollLeft;
     } else {
       // Since we don't know if is the body or html, get max.
-      this.scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
-      this.scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
+      this.scrollTop = Math.max(document.documentElement.scrollTop, document.body?.scrollTop ?? 0);
+      this.scrollLeft = Math.max(document.documentElement.scrollLeft, document.body?.scrollLeft ?? 0);
     }
   }
 
@@ -181,8 +181,12 @@ export class ScrollLockManager {
       document.scrollingElement.scrollLeft = this.scrollLeft;
     } else {
       // Since we don't know if is the body or html, set both.
-      document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop;
-      document.documentElement.scrollLeft = document.body.scrollLeft = this.scrollLeft;
+      document.documentElement.scrollTop = this.scrollTop;
+      document.documentElement.scrollLeft = this.scrollTop;
+      if (document.body) {
+        document.body.scrollTop = this.scrollTop;
+        document.body.scrollLeft = this.scrollLeft;
+      }
     }
   }
 

diff --git a/packages/elements/src/overlay/managers/viewport-manager.ts b/packages/elements/src/overlay/managers/viewport-manager.ts
@@ -107,7 +107,7 @@ export class ViewportManager {
     // @ts-ignore
     // TODO: Remove @ts-ignore and re-test again when standardized zoom is implemented across major browsers and TypeScript, https://github.com/w3c/csswg-drafts/issues/5623
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    const zoom = parseFloat(window.getComputedStyle(document.body).zoom);
+    const zoom = document.body ? parseFloat(window.getComputedStyle(document.body).zoom) : 1;
     const screenHeight = screenRect.height / zoom;
     const screenWidth = screenRect.width / zoom;
 

diff --git a/packages/elements/src/tooltip/elements/tooltip-element.ts b/packages/elements/src/tooltip/elements/tooltip-element.ts
@@ -51,7 +51,7 @@ tooltipElement.condition = condition;
 tooltipElement.renderer = renderer;
 
 const appendTitleTooltip = (): void => {
-  document.body.appendChild(tooltipElement);
+  document.body?.appendChild(tooltipElement);
 };
 
 if (document.body) {

diff --git a/packages/elements/src/tooltip/managers/tooltip-manager.ts b/packages/elements/src/tooltip/managers/tooltip-manager.ts
@@ -113,7 +113,7 @@ class TooltipManager {
       document.addEventListener('mouseleave', this.onMouseLeave, eventOptions);
       document.addEventListener('wheel', this.onWheel, eventOptions);
       document.addEventListener('keydown', this.onKeyDown, eventOptions);
-      document.body.addEventListener('blur', this.onBlur, eventOptions);
+      document.body?.addEventListener('blur', this.onBlur, eventOptions);
 
       const clickEventOptions = supportOptions ? { passive: true, capture: true } : true;
       document.addEventListener('click', this.onClick, clickEventOptions);
@@ -132,7 +132,7 @@ class TooltipManager {
       document.removeEventListener('mouseleave', this.onMouseLeave);
       document.removeEventListener('wheel', this.onWheel);
       document.removeEventListener('keydown', this.onKeyDown);
-      document.body.removeEventListener('blur', this.onBlur);
+      document.body?.removeEventListener('blur', this.onBlur);
 
       document.removeEventListener('click', this.onClick, true);
       document.removeEventListener('contextmenu', this.onClick, true);

diff --git a/sonar-project.properties b/sonar-project.properties
@@ -2,7 +2,7 @@ sonar.projectKey=refinitiv_refinitiv-ui
 sonar.organization=refinitiv
 sonar.exclusions=documents/**, packages/*-theme/**, packages/configurations/**, *.config.js, cli.js, packages/elements/scripts/**, packages/*/*.config.js, **/__snapshots__/**, **/__demo__/**, **/__test__/**
 sonar.javascript.lcov.reportPaths=**/coverage/lcov.info
-sonar.coverage.exclusions=scripts/**, packages/phrasebook/**, packages/utils/**, packages/polyfills/**, packages/theme-compiler/**, packages/create-efx/**, packages/demo-block/**
+sonar.coverage.exclusions=**/scripts/**, packages/phrasebook/**, packages/utils/**, packages/polyfills/**, packages/theme-compiler/**, packages/create-efx/**, packages/demo-block/**
 
 # This is the name and version displayed in the SonarCloud UI.
 #sonar.projectName=dtanp-rft_refinitiv-ui