fix: use canvas.ownerDocument in mouse events in case it is different…

… from window.document (#637)
szimek · Jul 21, 2022 · 636a503 · 636a503
1 parent 77cb9a0
commit 636a503
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 4 deletions.
diff --git a/src/signature_pad.ts b/src/signature_pad.ts
@@ -177,11 +177,17 @@ export default class SignaturePad extends SignatureEventTarget {
 
     this.canvas.removeEventListener('pointerdown', this._handlePointerStart);
     this.canvas.removeEventListener('pointermove', this._handlePointerMove);
-    document.removeEventListener('pointerup', this._handlePointerEnd);
+    this.canvas.ownerDocument.removeEventListener(
+      'pointerup',
+      this._handlePointerEnd,
+    );
 
     this.canvas.removeEventListener('mousedown', this._handleMouseDown);
     this.canvas.removeEventListener('mousemove', this._handleMouseMove);
-    document.removeEventListener('mouseup', this._handleMouseUp);
+    this.canvas.ownerDocument.removeEventListener(
+      'mouseup',
+      this._handleMouseUp,
+    );
 
     this.canvas.removeEventListener('touchstart', this._handleTouchStart);
     this.canvas.removeEventListener('touchmove', this._handleTouchMove);
@@ -378,15 +384,18 @@ export default class SignaturePad extends SignatureEventTarget {
 
     this.canvas.addEventListener('pointerdown', this._handlePointerStart);
     this.canvas.addEventListener('pointermove', this._handlePointerMove);
-    document.addEventListener('pointerup', this._handlePointerEnd);
+    this.canvas.ownerDocument.addEventListener(
+      'pointerup',
+      this._handlePointerEnd,
+    );
   }
 
   private _handleMouseEvents(): void {
     this._drawningStroke = false;
 
     this.canvas.addEventListener('mousedown', this._handleMouseDown);
     this.canvas.addEventListener('mousemove', this._handleMouseMove);
-    document.addEventListener('mouseup', this._handleMouseUp);
+    this.canvas.ownerDocument.addEventListener('mouseup', this._handleMouseUp);
   }
 
   private _handleTouchEvents(): void {

diff --git a/tests/signature_pad.test.ts b/tests/signature_pad.test.ts
@@ -165,6 +165,54 @@ describe('user interactions', () => {
     );
     expect(endStroke).toHaveBeenCalled();
   });
+
+  it('call endStroke on pointerup outside canvas when in an external window', () => {
+    const externalCanvas = document.createElement('canvas');
+    externalCanvas.setAttribute('width', '300');
+    externalCanvas.setAttribute('height', '150');
+
+    const externalDocument =
+      document.implementation.createHTMLDocument('New Document');
+
+    externalDocument.body.appendChild(externalCanvas);
+
+    const pad = new SignaturePad(externalCanvas);
+    const endStroke = jest.fn();
+    pad.addEventListener('endStroke', endStroke);
+
+    externalCanvas.dispatchEvent(
+      new PointerEvent('pointerdown', {
+        clientX: 50,
+        clientY: 30,
+        pressure: 1,
+      }),
+    );
+    externalCanvas.dispatchEvent(
+      new PointerEvent('pointermove', {
+        clientX: 240,
+        clientY: 30,
+        pressure: 1,
+      }),
+    );
+    // check that original document is not affected
+    document.dispatchEvent(
+      new PointerEvent('pointerup', {
+        clientX: 150,
+        clientY: 120,
+        pressure: 1,
+      }),
+    );
+    expect(endStroke).not.toHaveBeenCalled();
+    // check that external document emits
+    externalDocument.dispatchEvent(
+      new PointerEvent('pointerup', {
+        clientX: 150,
+        clientY: 120,
+        pressure: 1,
+      }),
+    );
+    expect(endStroke).toHaveBeenCalled();
+  });
 });
 
 describe(`touch events.`, () => {