feat: Bind keyboard events to the current excalidraw container and add handleKeyboardGlobally prop to allow host to bind to document (#3430)

* fix: Bind keyboard events to excalidraw container

* fix cases around blurring

* fix modal rendering so keyboard shortcuts work on modal as well

* Revert "fix modal rendering so keyboard shortcuts work on modal as well"

This reverts commit 2c8ec6be8e.

* Attach keyboard event in react way so we need not handle portals separately (modals)

* dnt propagate esc event when modal shown

* focus the container when help dialog closed with shift+?

* focus the help icon when help dialog on close triggered

* move focusNearestTabbableParent to util

* rename util to focusNearestParent and remove outline from excal and modal

* Add prop bindKeyGlobally to decide if keyboard events should be binded to document and allow it in excal app, revert tests

* fix

* focus container after installing library, reset library and closing error dialog

* fix tests and create util to focus container

* Add excalidraw-container class to focus on the container

* pass focus container to library to focus current instance of excal

* update docs

* remove util as it wont be used anywhere

* fix propagation not being stopped for React keyboard handling

* tweak reamde

Co-authored-by: David Luzar <luzar.david@gmail.com>

* tweak changelog

* rename prop to handleKeyboardGlobally

Co-authored-by: dwelle <luzar.david@gmail.com>

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

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, {
+      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, {
+      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.keyUp(document, { code: CODES.EQUAL, ctrlKey: true });
+    fireEvent.keyDown(document, {
+      code: CODES.EQUAL,
+      ctrlKey: true,
+    });
+    fireEvent.keyUp(document, {
+      code: CODES.EQUAL,
+      ctrlKey: true,
+    });
     expect(h.state.zoom.value).toBeGreaterThan(1);
-    fireEvent.keyDown(document, { code: CODES.MINUS, ctrlKey: true });
-    fireEvent.keyUp(document, { code: CODES.MINUS, ctrlKey: true });
+    fireEvent.keyDown(document, {
+      code: CODES.MINUS,
+      ctrlKey: true,
+    });
+    fireEvent.keyUp(document, {
+      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, {
+        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, {
+        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, {
+        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, {
+        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, {
+        key: KEYS.ESCAPE,
+      });
     }
 
     /*