fix: Bind keyboard events to excalidraw container

src/components/App.tsx

@@ -451,6 +451,7 @@ class App extends React.Component<AppProps, AppState> {
         })}
         ref={this.excalidrawContainerRef}
         onDrop={this.handleAppOnDrop}
+        tabIndex={0}
       >
         <IsMobileContext.Provider value={this.isMobile}>
           <LayerUI
@@ -848,7 +849,11 @@ class App extends React.Component<AppProps, AppState> {
       this.onScroll,
     );
 
-    document.removeEventListener(EVENT.KEYDOWN, this.onKeyDown, false);
+    this.excalidrawContainerRef.current!.removeEventListener(
+      EVENT.KEYDOWN,
+      this.onKeyDown,
+      false,
+    );
     document.removeEventListener(
       EVENT.MOUSE_MOVE,
       this.updateCurrentCursorPosition,
@@ -883,7 +888,11 @@ class App extends React.Component<AppProps, AppState> {
   private addEventListeners() {
     this.removeEventListeners();
     document.addEventListener(EVENT.COPY, this.onCopy);
-    document.addEventListener(EVENT.KEYDOWN, this.onKeyDown, false);
+    this.excalidrawContainerRef.current!.addEventListener(
+      EVENT.KEYDOWN,
+      this.onKeyDown,
+      false,
+    );
     document.addEventListener(EVENT.KEYUP, this.onKeyUp, { passive: true });
     document.addEventListener(
       EVENT.MOUSE_MOVE,

src/tests/__snapshots__/dragCreate.test.tsx.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`add element to the scene when pointer dragging long enough arrow 1`] = `1`;
+exports[`Test dragCreate add element to the scene when pointer dragging long enough arrow 1`] = `1`;
 
-exports[`add element to the scene when pointer dragging long enough arrow 2`] = `
+exports[`Test dragCreate add element to the scene when pointer dragging long enough arrow 2`] = `
 Object {
   "angle": 0,
   "backgroundColor": "transparent",
@@ -43,9 +43,9 @@ Object {
 }
 `;
 
-exports[`add element to the scene when pointer dragging long enough diamond 1`] = `1`;
+exports[`Test dragCreate add element to the scene when pointer dragging long enough diamond 1`] = `1`;
 
-exports[`add element to the scene when pointer dragging long enough diamond 2`] = `
+exports[`Test dragCreate add element to the scene when pointer dragging long enough diamond 2`] = `
 Object {
   "angle": 0,
   "backgroundColor": "transparent",
@@ -71,9 +71,9 @@ Object {
 }
 `;
 
-exports[`add element to the scene when pointer dragging long enough ellipse 1`] = `1`;
+exports[`Test dragCreate add element to the scene when pointer dragging long enough ellipse 1`] = `1`;
 
-exports[`add element to the scene when pointer dragging long enough ellipse 2`] = `
+exports[`Test dragCreate add element to the scene when pointer dragging long enough ellipse 2`] = `
 Object {
   "angle": 0,
   "backgroundColor": "transparent",
@@ -99,7 +99,7 @@ Object {
 }
 `;
 
-exports[`add element to the scene when pointer dragging long enough line 1`] = `
+exports[`Test dragCreate add element to the scene when pointer dragging long enough line 1`] = `
 Object {
   "angle": 0,
   "backgroundColor": "transparent",
@@ -140,9 +140,9 @@ Object {
 }
 `;
 
-exports[`add element to the scene when pointer dragging long enough rectangle 1`] = `1`;
+exports[`Test dragCreate add element to the scene when pointer dragging long enough rectangle 1`] = `1`;
 
-exports[`add element to the scene when pointer dragging long enough rectangle 2`] = `
+exports[`Test dragCreate add element to the scene when pointer dragging long enough rectangle 2`] = `
 Object {
   "angle": 0,
   "backgroundColor": "transparent",

src/tests/dragCreate.test.tsx

@@ -24,276 +24,282 @@ beforeEach(() => {
 
 const { h } = window;
 
-describe("add element to the scene when pointer dragging long enough", () => {
+describe("Test dragCreate", () => {
-  it("rectangle", async () => {
+  describe("add element to the scene when pointer dragging long enough", () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    it("rectangle", async () => {
-    // select tool
+      const { getByToolName, container } = await render(<ExcalidrawApp />);
-    const tool = getByToolName("rectangle");
+      // select tool
-    fireEvent.click(tool);
+      const tool = getByToolName("rectangle");
+      fireEvent.click(tool);
 
-    const canvas = container.querySelector("canvas")!;
+      const canvas = container.querySelector("canvas")!;
 
-    // start from (30, 20)
+      // start from (30, 20)
-    fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
+      fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
 
-    // move to (60,70)
+      // move to (60,70)
-    fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
+      fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
 
-    // finish (position does not matter)
+      // finish (position does not matter)
-    fireEvent.pointerUp(canvas);
+      fireEvent.pointerUp(canvas);
 
-    expect(renderScene).toHaveBeenCalledTimes(8);
+      expect(renderScene).toHaveBeenCalledTimes(8);
-    expect(h.state.selectionElement).toBeNull();
+      expect(h.state.selectionElement).toBeNull();
 
-    expect(h.elements.length).toEqual(1);
+      expect(h.elements.length).toEqual(1);
-    expect(h.elements[0].type).toEqual("rectangle");
+      expect(h.elements[0].type).toEqual("rectangle");
-    expect(h.elements[0].x).toEqual(30);
+      expect(h.elements[0].x).toEqual(30);
-    expect(h.elements[0].y).toEqual(20);
+      expect(h.elements[0].y).toEqual(20);
-    expect(h.elements[0].width).toEqual(30); // 60 - 30
+      expect(h.elements[0].width).toEqual(30); // 60 - 30
-    expect(h.elements[0].height).toEqual(50); // 70 - 20
+      expect(h.elements[0].height).toEqual(50); // 70 - 20
 
-    expect(h.elements.length).toMatchSnapshot();
+      expect(h.elements.length).toMatchSnapshot();
-    h.elements.forEach((element) => expect(element).toMatchSnapshot());
+      h.elements.forEach((element) => expect(element).toMatchSnapshot());
+    });
+
+    it("ellipse", async () => {
+      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      // select tool
+      const tool = getByToolName("ellipse");
+      fireEvent.click(tool);
+
+      const canvas = container.querySelector("canvas")!;
+
+      // start from (30, 20)
+      fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
+
+      // move to (60,70)
+      fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
+
+      // finish (position does not matter)
+      fireEvent.pointerUp(canvas);
+
+      expect(renderScene).toHaveBeenCalledTimes(8);
+      expect(h.state.selectionElement).toBeNull();
+
+      expect(h.elements.length).toEqual(1);
+      expect(h.elements[0].type).toEqual("ellipse");
+      expect(h.elements[0].x).toEqual(30);
+      expect(h.elements[0].y).toEqual(20);
+      expect(h.elements[0].width).toEqual(30); // 60 - 30
+      expect(h.elements[0].height).toEqual(50); // 70 - 20
+
+      expect(h.elements.length).toMatchSnapshot();
+      h.elements.forEach((element) => expect(element).toMatchSnapshot());
+    });
+
+    it("diamond", async () => {
+      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      // select tool
+      const tool = getByToolName("diamond");
+      fireEvent.click(tool);
+
+      const canvas = container.querySelector("canvas")!;
+
+      // start from (30, 20)
+      fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
+
+      // move to (60,70)
+      fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
+
+      // finish (position does not matter)
+      fireEvent.pointerUp(canvas);
+
+      expect(renderScene).toHaveBeenCalledTimes(8);
+      expect(h.state.selectionElement).toBeNull();
+
+      expect(h.elements.length).toEqual(1);
+      expect(h.elements[0].type).toEqual("diamond");
+      expect(h.elements[0].x).toEqual(30);
+      expect(h.elements[0].y).toEqual(20);
+      expect(h.elements[0].width).toEqual(30); // 60 - 30
+      expect(h.elements[0].height).toEqual(50); // 70 - 20
+
+      expect(h.elements.length).toMatchSnapshot();
+      h.elements.forEach((element) => expect(element).toMatchSnapshot());
+    });
+
+    it("arrow", async () => {
+      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      // select tool
+      const tool = getByToolName("arrow");
+      fireEvent.click(tool);
+
+      const canvas = container.querySelector("canvas")!;
+
+      // start from (30, 20)
+      fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
+
+      // move to (60,70)
+      fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
+
+      // finish (position does not matter)
+      fireEvent.pointerUp(canvas);
+
+      expect(renderScene).toHaveBeenCalledTimes(8);
+      expect(h.state.selectionElement).toBeNull();
+
+      expect(h.elements.length).toEqual(1);
+
+      const element = h.elements[0] as ExcalidrawLinearElement;
+
+      expect(element.type).toEqual("arrow");
+      expect(element.x).toEqual(30);
+      expect(element.y).toEqual(20);
+      expect(element.points.length).toEqual(2);
+      expect(element.points[0]).toEqual([0, 0]);
+      expect(element.points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
+
+      expect(h.elements.length).toMatchSnapshot();
+      h.elements.forEach((element) => expect(element).toMatchSnapshot());
+    });
+
+    it("line", async () => {
+      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      // select tool
+      const tool = getByToolName("line");
+      fireEvent.click(tool);
+
+      const canvas = container.querySelector("canvas")!;
+
+      // start from (30, 20)
+      fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
+
+      // move to (60,70)
+      fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
+
+      // finish (position does not matter)
+      fireEvent.pointerUp(canvas);
+
+      expect(renderScene).toHaveBeenCalledTimes(8);
+      expect(h.state.selectionElement).toBeNull();
+
+      expect(h.elements.length).toEqual(1);
+
+      const element = h.elements[0] as ExcalidrawLinearElement;
+
+      expect(element.type).toEqual("line");
+      expect(element.x).toEqual(30);
+      expect(element.y).toEqual(20);
+      expect(element.points.length).toEqual(2);
+      expect(element.points[0]).toEqual([0, 0]);
+      expect(element.points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
+
+      h.elements.forEach((element) => expect(element).toMatchSnapshot());
+    });
   });
 
-  it("ellipse", async () => {
+  describe("do not add element to the scene if size is too small", () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    beforeAll(() => {
-    // select tool
+      mockBoundingClientRect();
-    const tool = getByToolName("ellipse");
+    });
-    fireEvent.click(tool);
+    afterAll(() => {
+      restoreOriginalGetBoundingClientRect();
+    });
 
-    const canvas = container.querySelector("canvas")!;
+    it("rectangle", async () => {
+      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      // select tool
+      const tool = getByToolName("rectangle");
+      fireEvent.click(tool);
 
-    // start from (30, 20)
+      const canvas = container.querySelector("canvas")!;
-    fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
 
-    // move to (60,70)
+      // start from (30, 20)
-    fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
+      fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
 
-    // finish (position does not matter)
+      // finish (position does not matter)
-    fireEvent.pointerUp(canvas);
+      fireEvent.pointerUp(canvas);
 
-    expect(renderScene).toHaveBeenCalledTimes(8);
+      expect(renderScene).toHaveBeenCalledTimes(6);
-    expect(h.state.selectionElement).toBeNull();
+      expect(h.state.selectionElement).toBeNull();
+      expect(h.elements.length).toEqual(0);
+    });
 
-    expect(h.elements.length).toEqual(1);
+    it("ellipse", async () => {
-    expect(h.elements[0].type).toEqual("ellipse");
+      const { getByToolName, container } = await render(<ExcalidrawApp />);
-    expect(h.elements[0].x).toEqual(30);
+      // select tool
-    expect(h.elements[0].y).toEqual(20);
+      const tool = getByToolName("ellipse");
-    expect(h.elements[0].width).toEqual(30); // 60 - 30
+      fireEvent.click(tool);
-    expect(h.elements[0].height).toEqual(50); // 70 - 20
 
-    expect(h.elements.length).toMatchSnapshot();
+      const canvas = container.querySelector("canvas")!;
-    h.elements.forEach((element) => expect(element).toMatchSnapshot());
-  });
 
-  it("diamond", async () => {
+      // start from (30, 20)
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+      fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
-    // select tool
-    const tool = getByToolName("diamond");
-    fireEvent.click(tool);
 
-    const canvas = container.querySelector("canvas")!;
+      // finish (position does not matter)
+      fireEvent.pointerUp(canvas);
 
-    // start from (30, 20)
+      expect(renderScene).toHaveBeenCalledTimes(6);
-    fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
+      expect(h.state.selectionElement).toBeNull();
+      expect(h.elements.length).toEqual(0);
+    });
 
-    // move to (60,70)
+    it("diamond", async () => {
-    fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
+      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      // select tool
+      const tool = getByToolName("diamond");
+      fireEvent.click(tool);
 
-    // finish (position does not matter)
+      const canvas = container.querySelector("canvas")!;
-    fireEvent.pointerUp(canvas);
 
-    expect(renderScene).toHaveBeenCalledTimes(8);
+      // start from (30, 20)
-    expect(h.state.selectionElement).toBeNull();
+      fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
 
-    expect(h.elements.length).toEqual(1);
+      // finish (position does not matter)
-    expect(h.elements[0].type).toEqual("diamond");
+      fireEvent.pointerUp(canvas);
-    expect(h.elements[0].x).toEqual(30);
-    expect(h.elements[0].y).toEqual(20);
-    expect(h.elements[0].width).toEqual(30); // 60 - 30
-    expect(h.elements[0].height).toEqual(50); // 70 - 20
 
-    expect(h.elements.length).toMatchSnapshot();
+      expect(renderScene).toHaveBeenCalledTimes(6);
-    h.elements.forEach((element) => expect(element).toMatchSnapshot());
+      expect(h.state.selectionElement).toBeNull();
-  });
+      expect(h.elements.length).toEqual(0);
+    });
 
-  it("arrow", async () => {
+    it("arrow", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+      const { getByToolName, container } = await render(<ExcalidrawApp />);
-    // select tool
+      // select tool
-    const tool = getByToolName("arrow");
+      const tool = getByToolName("arrow");
-    fireEvent.click(tool);
+      fireEvent.click(tool);
 
-    const canvas = container.querySelector("canvas")!;
+      const canvas = container.querySelector("canvas")!;
 
-    // start from (30, 20)
+      // start from (30, 20)
-    fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
+      fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
 
-    // move to (60,70)
+      // finish (position does not matter)
-    fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
+      fireEvent.pointerUp(canvas);
 
-    // finish (position does not matter)
+      // we need to finalize it because arrows and lines enter multi-mode
-    fireEvent.pointerUp(canvas);
+      fireEvent.keyDown(document.querySelector(".excalidraw")!, {
+        key: KEYS.ENTER,
+      });
 
-    expect(renderScene).toHaveBeenCalledTimes(8);
+      expect(renderScene).toHaveBeenCalledTimes(7);
-    expect(h.state.selectionElement).toBeNull();
+      expect(h.state.selectionElement).toBeNull();
+      expect(h.elements.length).toEqual(0);
+    });
 
-    expect(h.elements.length).toEqual(1);
+    it("line", async () => {
+      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      // select tool
+      const tool = getByToolName("line");
+      fireEvent.click(tool);
 
-    const element = h.elements[0] as ExcalidrawLinearElement;
+      const canvas = container.querySelector("canvas")!;
 
-    expect(element.type).toEqual("arrow");
+      // start from (30, 20)
-    expect(element.x).toEqual(30);
+      fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
-    expect(element.y).toEqual(20);
-    expect(element.points.length).toEqual(2);
-    expect(element.points[0]).toEqual([0, 0]);
-    expect(element.points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
 
-    expect(h.elements.length).toMatchSnapshot();
+      // finish (position does not matter)
-    h.elements.forEach((element) => expect(element).toMatchSnapshot());
+      fireEvent.pointerUp(canvas);
-  });
 
-  it("line", async () => {
+      // we need to finalize it because arrows and lines enter multi-mode
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+      fireEvent.keyDown(document.querySelector(".excalidraw")!, {
-    // select tool
+        key: KEYS.ENTER,
-    const tool = getByToolName("line");
+      });
-    fireEvent.click(tool);
 
-    const canvas = container.querySelector("canvas")!;
+      expect(renderScene).toHaveBeenCalledTimes(7);
-
+      expect(h.state.selectionElement).toBeNull();
-    // start from (30, 20)
+      expect(h.elements.length).toEqual(0);
-    fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
+    });
-
-    // move to (60,70)
-    fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
-
-    // finish (position does not matter)
-    fireEvent.pointerUp(canvas);
-
-    expect(renderScene).toHaveBeenCalledTimes(8);
-    expect(h.state.selectionElement).toBeNull();
-
-    expect(h.elements.length).toEqual(1);
-
-    const element = h.elements[0] as ExcalidrawLinearElement;
-
-    expect(element.type).toEqual("line");
-    expect(element.x).toEqual(30);
-    expect(element.y).toEqual(20);
-    expect(element.points.length).toEqual(2);
-    expect(element.points[0]).toEqual([0, 0]);
-    expect(element.points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
-
-    h.elements.forEach((element) => expect(element).toMatchSnapshot());
-  });
-});
-
-describe("do not add element to the scene if size is too small", () => {
-  beforeAll(() => {
-    mockBoundingClientRect();
-  });
-  afterAll(() => {
-    restoreOriginalGetBoundingClientRect();
-  });
-
-  it("rectangle", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
-    // select tool
-    const tool = getByToolName("rectangle");
-    fireEvent.click(tool);
-
-    const canvas = container.querySelector("canvas")!;
-
-    // start from (30, 20)
-    fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
-
-    // finish (position does not matter)
-    fireEvent.pointerUp(canvas);
-
-    expect(renderScene).toHaveBeenCalledTimes(6);
-    expect(h.state.selectionElement).toBeNull();
-    expect(h.elements.length).toEqual(0);
-  });
-
-  it("ellipse", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
-    // select tool
-    const tool = getByToolName("ellipse");
-    fireEvent.click(tool);
-
-    const canvas = container.querySelector("canvas")!;
-
-    // start from (30, 20)
-    fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
-
-    // finish (position does not matter)
-    fireEvent.pointerUp(canvas);
-
-    expect(renderScene).toHaveBeenCalledTimes(6);
-    expect(h.state.selectionElement).toBeNull();
-    expect(h.elements.length).toEqual(0);
-  });
-
-  it("diamond", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
-    // select tool
-    const tool = getByToolName("diamond");
-    fireEvent.click(tool);
-
-    const canvas = container.querySelector("canvas")!;
-
-    // start from (30, 20)
-    fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
-
-    // finish (position does not matter)
-    fireEvent.pointerUp(canvas);
-
-    expect(renderScene).toHaveBeenCalledTimes(6);
-    expect(h.state.selectionElement).toBeNull();
-    expect(h.elements.length).toEqual(0);
-  });
-
-  it("arrow", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
-    // select tool
-    const tool = getByToolName("arrow");
-    fireEvent.click(tool);
-
-    const canvas = container.querySelector("canvas")!;
-
-    // start from (30, 20)
-    fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
-
-    // finish (position does not matter)
-    fireEvent.pointerUp(canvas);
-
-    // we need to finalize it because arrows and lines enter multi-mode
-    fireEvent.keyDown(document, { key: KEYS.ENTER });
-
-    expect(renderScene).toHaveBeenCalledTimes(7);
-    expect(h.state.selectionElement).toBeNull();
-    expect(h.elements.length).toEqual(0);
-  });
-
-  it("line", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
-    // select tool
-    const tool = getByToolName("line");
-    fireEvent.click(tool);
-
-    const canvas = container.querySelector("canvas")!;
-
-    // start from (30, 20)
-    fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
-
-    // finish (position does not matter)
-    fireEvent.pointerUp(canvas);
-
-    // we need to finalize it because arrows and lines enter multi-mode
-    fireEvent.keyDown(document, { key: KEYS.ENTER });
-
-    expect(renderScene).toHaveBeenCalledTimes(7);
-    expect(h.state.selectionElement).toBeNull();
-    expect(h.elements.length).toEqual(0);
   });
 });

src/tests/helpers/ui.ts

@@ -40,7 +40,7 @@ export class Keyboard {
   };
 
   static keyDown = (key: string) => {
-    fireEvent.keyDown(document, {
+    fireEvent.keyDown(document.querySelector(".excalidraw")!, {
       key,
       ctrlKey,
       shiftKey,
@@ -49,7 +49,7 @@ export class Keyboard {
   };
 
   static keyUp = (key: string) => {
-    fireEvent.keyUp(document, {
+    fireEvent.keyUp(document.querySelector(".excalidraw")!, {
       key,
       ctrlKey,
       shiftKey,
@@ -63,7 +63,7 @@ export class Keyboard {
   };
 
   static codeDown = (code: string) => {
-    fireEvent.keyDown(document, {
+    fireEvent.keyDown(document.querySelector(".excalidraw")!, {
       code,
       ctrlKey,
       shiftKey,
@@ -72,7 +72,7 @@ export class Keyboard {
   };
 
   static codeUp = (code: string) => {
-    fireEvent.keyUp(document, {
+    fireEvent.keyUp(document.querySelector(".excalidraw")!, {
       code,
       ctrlKey,
       shiftKey,

src/tests/multiPointCreate.test.tsx

@@ -99,7 +99,9 @@ describe("multi point mode in linear elements", () => {
     // done
     fireEvent.pointerDown(canvas);
     fireEvent.pointerUp(canvas);
-    fireEvent.keyDown(document, { key: KEYS.ENTER });
+    fireEvent.keyDown(document.querySelector(".excalidraw")!, {
+      key: KEYS.ENTER,
+    });
 
     expect(renderScene).toHaveBeenCalledTimes(14);
     expect(h.elements.length).toEqual(1);
@@ -140,7 +142,9 @@ describe("multi point mode in linear elements", () => {
     // done
     fireEvent.pointerDown(canvas);
     fireEvent.pointerUp(canvas);
-    fireEvent.keyDown(document, { key: KEYS.ENTER });
+    fireEvent.keyDown(document.querySelector(".excalidraw")!, {
+      key: KEYS.ENTER,
+    });
 
     expect(renderScene).toHaveBeenCalledTimes(14);
     expect(h.elements.length).toEqual(1);

src/tests/regressionTests.test.tsx

@@ -413,11 +413,23 @@ describe("regression tests", () => {
 
   it("zoom hotkeys", () => {
     expect(h.state.zoom.value).toBe(1);
-    fireEvent.keyDown(document, { code: CODES.EQUAL, ctrlKey: true });
+    fireEvent.keyDown(document.querySelector(".excalidraw")!, {
-    fireEvent.keyUp(document, { code: CODES.EQUAL, ctrlKey: true });
+      code: CODES.EQUAL,
+      ctrlKey: true,
+    });
+    fireEvent.keyUp(document.querySelector(".excalidraw")!, {
+      code: CODES.EQUAL,
+      ctrlKey: true,
+    });
     expect(h.state.zoom.value).toBeGreaterThan(1);
-    fireEvent.keyDown(document, { code: CODES.MINUS, ctrlKey: true });
+    fireEvent.keyDown(document.querySelector(".excalidraw")!, {
-    fireEvent.keyUp(document, { code: CODES.MINUS, ctrlKey: true });
+      code: CODES.MINUS,
+      ctrlKey: true,
+    });
+    fireEvent.keyUp(document.querySelector(".excalidraw")!, {
+      code: CODES.MINUS,
+      ctrlKey: true,
+    });
     expect(h.state.zoom.value).toBe(1);
   });
 

src/tests/selection.test.tsx

@@ -100,7 +100,9 @@ describe("select single element on the scene", () => {
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
       fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
       fireEvent.pointerUp(canvas);
-      fireEvent.keyDown(document, { key: KEYS.ESCAPE });
+      fireEvent.keyDown(document.querySelector(".excalidraw")!, {
+        key: KEYS.ESCAPE,
+      });
     }
 
     const tool = getByToolName("selection");
@@ -127,7 +129,9 @@ describe("select single element on the scene", () => {
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
       fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
       fireEvent.pointerUp(canvas);
-      fireEvent.keyDown(document, { key: KEYS.ESCAPE });
+      fireEvent.keyDown(document.querySelector(".excalidraw")!, {
+        key: KEYS.ESCAPE,
+      });
     }
 
     const tool = getByToolName("selection");
@@ -154,7 +158,9 @@ describe("select single element on the scene", () => {
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
       fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
       fireEvent.pointerUp(canvas);
-      fireEvent.keyDown(document, { key: KEYS.ESCAPE });
+      fireEvent.keyDown(document.querySelector(".excalidraw")!, {
+        key: KEYS.ESCAPE,
+      });
     }
 
     const tool = getByToolName("selection");
@@ -181,7 +187,9 @@ describe("select single element on the scene", () => {
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
       fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
       fireEvent.pointerUp(canvas);
-      fireEvent.keyDown(document, { key: KEYS.ESCAPE });
+      fireEvent.keyDown(document.querySelector(".excalidraw")!, {
+        key: KEYS.ESCAPE,
+      });
     }
 
     /*
@@ -220,7 +228,9 @@ describe("select single element on the scene", () => {
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
       fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
       fireEvent.pointerUp(canvas);
-      fireEvent.keyDown(document, { key: KEYS.ESCAPE });
+      fireEvent.keyDown(document.querySelector(".excalidraw")!, {
+        key: KEYS.ESCAPE,
+      });
     }
 
     /*