fix(color-picker, popover, shell-panel, slider, tooltip): Register ev…

…ents on the window instead of the document (#8247)
Esri · Nov 22, 2023 · 2aaf592 · 2aaf592
1 parent 484a5aa
commit 2aaf592
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 32 deletions.
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -529,8 +529,8 @@ export class ColorPicker
 
     const { offsetX, offsetY } = event;
 
-    document.addEventListener("pointermove", this.globalPointerMoveHandler);
-    document.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
+    window.addEventListener("pointermove", this.globalPointerMoveHandler);
+    window.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
 
     this.activeCanvasInfo = {
       context: this.colorFieldRenderingContext,
@@ -547,8 +547,8 @@ export class ColorPicker
 
     const { offsetX } = event;
 
-    document.addEventListener("pointermove", this.globalPointerMoveHandler);
-    document.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
+    window.addEventListener("pointermove", this.globalPointerMoveHandler);
+    window.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
 
     this.activeCanvasInfo = {
       context: this.hueSliderRenderingContext,
@@ -565,8 +565,8 @@ export class ColorPicker
 
     const { offsetX } = event;
 
-    document.addEventListener("pointermove", this.globalPointerMoveHandler);
-    document.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
+    window.addEventListener("pointermove", this.globalPointerMoveHandler);
+    window.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
 
     this.activeCanvasInfo = {
       context: this.opacitySliderRenderingContext,
@@ -695,8 +695,8 @@ export class ColorPicker
   }
 
   disconnectedCallback(): void {
-    document.removeEventListener("pointermove", this.globalPointerMoveHandler);
-    document.removeEventListener("pointerup", this.globalPointerUpHandler);
+    window.removeEventListener("pointermove", this.globalPointerMoveHandler);
+    window.removeEventListener("pointerup", this.globalPointerUpHandler);
     disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);

diff --git a/packages/calcite-components/src/components/popover/PopoverManager.ts b/packages/calcite-components/src/components/popover/PopoverManager.ts
@@ -91,12 +91,12 @@ export default class PopoverManager {
   };
 
   private addListeners(): void {
-    document.addEventListener("pointerdown", this.clickHandler, { capture: true });
-    document.addEventListener("keydown", this.keyHandler, { capture: true });
+    window.addEventListener("pointerdown", this.clickHandler, { capture: true });
+    window.addEventListener("keydown", this.keyHandler, { capture: true });
   }
 
   private removeListeners(): void {
-    document.removeEventListener("pointerdown", this.clickHandler, { capture: true });
-    document.removeEventListener("keydown", this.keyHandler, { capture: true });
+    window.removeEventListener("pointerdown", this.clickHandler, { capture: true });
+    window.removeEventListener("keydown", this.keyHandler, { capture: true });
   }
 }
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -578,8 +578,8 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
     }
 
     event.preventDefault();
-    document.removeEventListener("pointerup", this.separatorPointerUp);
-    document.removeEventListener("pointermove", this.separatorPointerMove);
+    window.removeEventListener("pointerup", this.separatorPointerUp);
+    window.removeEventListener("pointermove", this.separatorPointerMove);
   };
 
   setInitialContentHeight = (): void => {
@@ -608,8 +608,8 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
       this.initialClientX = event.clientX;
     }
 
-    document.addEventListener("pointerup", this.separatorPointerUp);
-    document.addEventListener("pointermove", this.separatorPointerMove);
+    window.addEventListener("pointerup", this.separatorPointerUp);
+    window.addEventListener("pointermove", this.separatorPointerMove);
   };
 
   connectSeparator = (separatorEl: HTMLDivElement): void => {

diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
@@ -1068,9 +1068,9 @@ export class Slider
     this.dragProp = prop;
     this.lastDragProp = this.dragProp;
     this.activeProp = prop;
-    document.addEventListener("pointermove", this.dragUpdate);
-    document.addEventListener("pointerup", this.pointerUpDragEnd);
-    document.addEventListener("pointercancel", this.dragEnd);
+    window.addEventListener("pointermove", this.dragUpdate);
+    window.addEventListener("pointerup", this.pointerUpDragEnd);
+    window.addEventListener("pointercancel", this.dragEnd);
   }
 
   private focusActiveHandle(valueX: number): void {
@@ -1157,9 +1157,9 @@ export class Slider
   };
 
   private removeDragListeners() {
-    document.removeEventListener("pointermove", this.dragUpdate);
-    document.removeEventListener("pointerup", this.pointerUpDragEnd);
-    document.removeEventListener("pointercancel", this.dragEnd);
+    window.removeEventListener("pointermove", this.dragUpdate);
+    window.removeEventListener("pointerup", this.pointerUpDragEnd);
+    window.removeEventListener("pointercancel", this.dragEnd);
   }
 
   /**

diff --git a/packages/calcite-components/src/components/tooltip/TooltipManager.ts b/packages/calcite-components/src/components/tooltip/TooltipManager.ts
@@ -153,19 +153,19 @@ export default class TooltipManager {
   }
 
   private addListeners(): void {
-    document.addEventListener("keydown", this.keyDownHandler, { capture: true });
-    document.addEventListener("pointermove", this.pointerMoveHandler, { capture: true });
-    document.addEventListener("pointerdown", this.pointerDownHandler, { capture: true });
-    document.addEventListener("focusin", this.focusInHandler, { capture: true });
-    document.addEventListener("focusout", this.focusOutHandler, { capture: true });
+    window.addEventListener("keydown", this.keyDownHandler, { capture: true });
+    window.addEventListener("pointermove", this.pointerMoveHandler, { capture: true });
+    window.addEventListener("pointerdown", this.pointerDownHandler, { capture: true });
+    window.addEventListener("focusin", this.focusInHandler, { capture: true });
+    window.addEventListener("focusout", this.focusOutHandler, { capture: true });
   }
 
   private removeListeners(): void {
-    document.removeEventListener("keydown", this.keyDownHandler, { capture: true });
-    document.removeEventListener("pointermove", this.pointerMoveHandler, { capture: true });
-    document.removeEventListener("pointerdown", this.pointerDownHandler, { capture: true });
-    document.removeEventListener("focusin", this.focusInHandler, { capture: true });
-    document.removeEventListener("focusout", this.focusOutHandler, { capture: true });
+    window.removeEventListener("keydown", this.keyDownHandler, { capture: true });
+    window.removeEventListener("pointermove", this.pointerMoveHandler, { capture: true });
+    window.removeEventListener("pointerdown", this.pointerDownHandler, { capture: true });
+    window.removeEventListener("focusin", this.focusInHandler, { capture: true });
+    window.removeEventListener("focusout", this.focusOutHandler, { capture: true });
   }
 
   private clearHoverOpenTimeout(): void {