fix: ensure that preventDefault is only called when necessary for key…

…board inputs
JamesLMilner · Jun 20, 2023 · 108e20d · 108e20d
1 parent 295f7e3
commit 108e20d
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 37 deletions.
diff --git a/src/adapters/common/base.adapter.ts b/src/adapters/common/base.adapter.ts
@@ -214,12 +214,12 @@ export abstract class TerraDrawBaseAdapter {
 
 					if (!this._currentModeCallbacks) return;
 
-					event.preventDefault();
-
 					this._heldKeys.delete(event.key);
 
 					this._currentModeCallbacks.onKeyUp({
 						key: event.key,
+						heldKeys: Array.from(this._heldKeys),
+						preventDefault: () => event.preventDefault(),
 					});
 				},
 				register: (callback) => {
@@ -238,12 +238,12 @@ export abstract class TerraDrawBaseAdapter {
 						return;
 					}
 
-					event.preventDefault();
-
 					this._heldKeys.add(event.key);
 
 					this._currentModeCallbacks.onKeyDown({
 						key: event.key,
+						heldKeys: Array.from(this._heldKeys),
+						preventDefault: () => event.preventDefault(),
 					});
 				},
 				register: (callback) => {

diff --git a/src/common.ts b/src/common.ts
@@ -36,6 +36,8 @@ export interface TerraDrawMouseEvent {
 
 export interface TerraDrawKeyboardEvent {
 	key: string;
+	heldKeys: string[];
+	preventDefault: () => void;
 }
 
 export type SetCursor = (

diff --git a/src/modes/circle/circle.spec.ts b/src/modes/circle/circle.spec.ts
@@ -222,6 +222,8 @@ describe("TerraDrawCircleMode", () => {
 
 			circleMode.onKeyUp({
 				key: "Enter",
+				heldKeys: [],
+				preventDefault: jest.fn(),
 			});
 
 			features = store.copyAll();
@@ -356,7 +358,11 @@ describe("TerraDrawCircleMode", () => {
 
 		describe("cancel", () => {
 			it("does nothing when no circle is present", () => {
-				circleMode.onKeyUp({ key: "Escape" });
+				circleMode.onKeyUp({
+					key: "Escape",
+					heldKeys: [],
+					preventDefault: jest.fn(),
+				});
 			});
 
 			it("deletes the circle when currently editing", () => {
@@ -372,7 +378,11 @@ describe("TerraDrawCircleMode", () => {
 				let features = store.copyAll();
 				expect(features.length).toBe(1);
 
-				circleMode.onKeyUp({ key: "Escape" });
+				circleMode.onKeyUp({
+					key: "Escape",
+					heldKeys: [],
+					preventDefault: jest.fn(),
+				});
 
 				features = store.copyAll();
 				expect(features.length).toBe(0);
@@ -401,7 +411,11 @@ describe("TerraDrawCircleMode", () => {
 				let features = store.copyAll();
 				expect(features.length).toBe(1);
 
-				circleMode.onKeyUp({ key: "Escape" });
+				circleMode.onKeyUp({
+					key: "Escape",
+					heldKeys: [],
+					preventDefault: jest.fn(),
+				});
 
 				features = store.copyAll();
 				expect(features.length).toBe(1);

diff --git a/src/modes/freehand/freehand.mode.spec.ts b/src/modes/freehand/freehand.mode.spec.ts
@@ -336,7 +336,11 @@ describe("TerraDrawFreehandMode", () => {
 
 		describe("cancel", () => {
 			it("does nothing when no freehand is present", () => {
-				freehandMode.onKeyUp({ key: "Escape" });
+				freehandMode.onKeyUp({
+					key: "Escape",
+					heldKeys: [],
+					preventDefault: jest.fn(),
+				});
 			});
 
 			it("deletes the freehand when currently editing", () => {
@@ -352,7 +356,11 @@ describe("TerraDrawFreehandMode", () => {
 				let features = store.copyAll();
 				expect(features.length).toBe(2);
 
-				freehandMode.onKeyUp({ key: "Escape" });
+				freehandMode.onKeyUp({
+					key: "Escape",
+					heldKeys: [],
+					preventDefault: jest.fn(),
+				});
 
 				features = store.copyAll();
 				expect(features.length).toBe(0);
@@ -380,7 +388,11 @@ describe("TerraDrawFreehandMode", () => {
 				let features = store.copyAll();
 				expect(features.length).toBe(2);
 
-				freehandMode.onKeyUp({ key: "Escape" });
+				freehandMode.onKeyUp({
+					key: "Escape",
+					heldKeys: [],
+					preventDefault: jest.fn(),
+				});
 
 				features = store.copyAll();
 				expect(features.length).toBe(2);
@@ -403,6 +415,8 @@ describe("TerraDrawFreehandMode", () => {
 
 				freehandMode.onKeyUp({
 					key: "Enter",
+					heldKeys: [],
+					preventDefault: jest.fn(),
 				});
 
 				features = store.copyAll();

diff --git a/src/modes/greatcircle/great-circle.mode.spec.ts b/src/modes/greatcircle/great-circle.mode.spec.ts
@@ -298,7 +298,11 @@ describe("TerraDrawGreatCircleMode", () => {
 
 		describe("cancel", () => {
 			it("does nothing when no line is present", () => {
-				greatCircleMode.onKeyUp({ key: "Escape" });
+				greatCircleMode.onKeyUp({
+					key: "Escape",
+					heldKeys: [],
+					preventDefault: jest.fn(),
+				});
 				expect(onChange).toBeCalledTimes(0);
 			});
 
@@ -315,7 +319,11 @@ describe("TerraDrawGreatCircleMode", () => {
 				let features = store.copyAll();
 				expect(features.length).toBe(2);
 
-				greatCircleMode.onKeyUp({ key: "Escape" });
+				greatCircleMode.onKeyUp({
+					key: "Escape",
+					heldKeys: [],
+					preventDefault: jest.fn(),
+				});
 
 				features = store.copyAll();
 				expect(features.length).toBe(0);
@@ -324,7 +332,11 @@ describe("TerraDrawGreatCircleMode", () => {
 
 		describe("finish", () => {
 			it("does nothing if no drawing is happening", () => {
-				greatCircleMode.onKeyUp({ key: "Enter" });
+				greatCircleMode.onKeyUp({
+					key: "Enter",
+					heldKeys: [],
+					preventDefault: jest.fn(),
+				});
 
 				expect(onChange).toBeCalledTimes(0);
 			});
@@ -361,7 +373,11 @@ describe("TerraDrawGreatCircleMode", () => {
 
 				expect(features[0].geometry.coordinates.length).toBe(100);
 
-				greatCircleMode.onKeyUp({ key: "Enter" });
+				greatCircleMode.onKeyUp({
+					key: "Enter",
+					heldKeys: [],
+					preventDefault: jest.fn(),
+				});
 
 				expect(onChange).toBeCalledTimes(5);
 				features = store.copyAll();
@@ -416,7 +432,11 @@ describe("TerraDrawGreatCircleMode", () => {
 
 				expect(features[0].geometry.coordinates.length).toBe(100);
 
-				greatCircleMode.onKeyUp({ key: "Enter" });
+				greatCircleMode.onKeyUp({
+					key: "Enter",
+					heldKeys: [],
+					preventDefault: jest.fn(),
+				});
 
 				expect(onChange).toBeCalledTimes(4);
 			});

diff --git a/src/modes/linestring/linestring.mode.spec.ts b/src/modes/linestring/linestring.mode.spec.ts
@@ -446,7 +446,11 @@ describe("TerraDrawLineStringMode", () => {
 
 		describe("cancel", () => {
 			it("does nothing when no line is present", () => {
-				lineStringMode.onKeyUp({ key: "Escape" });
+				lineStringMode.onKeyUp({
+					key: "Escape",
+					preventDefault: jest.fn(),
+					heldKeys: [],
+				});
 			});
 
 			it("deletes the line when currently editing", () => {
@@ -462,7 +466,11 @@ describe("TerraDrawLineStringMode", () => {
 				let features = store.copyAll();
 				expect(features.length).toBe(1);
 
-				lineStringMode.onKeyUp({ key: "Escape" });
+				lineStringMode.onKeyUp({
+					key: "Escape",
+					preventDefault: jest.fn(),
+					heldKeys: [],
+				});
 
 				features = store.copyAll();
 				expect(features.length).toBe(0);
@@ -538,6 +546,8 @@ describe("TerraDrawLineStringMode", () => {
 
 				lineStringMode.onKeyUp({
 					key: "Enter",
+					preventDefault: jest.fn(),
+					heldKeys: [],
 				});
 
 				expect(onChange).toBeCalledTimes(8);
@@ -636,6 +646,8 @@ describe("TerraDrawLineStringMode", () => {
 
 				lineStringMode.onKeyUp({
 					key: "Enter",
+					preventDefault: jest.fn(),
+					heldKeys: [],
 				});
 
 				expect(onChange).toBeCalledTimes(6);

diff --git a/src/modes/polygon/polygon.mode.spec.ts b/src/modes/polygon/polygon.mode.spec.ts
@@ -981,7 +981,11 @@ describe("TerraDrawPolygonMode", () => {
 
 		describe("cancel", () => {
 			it("does nothing when no line is present", () => {
-				polygonMode.onKeyUp({ key: "Escape" });
+				polygonMode.onKeyUp({
+					key: "Escape",
+					preventDefault: jest.fn(),
+					heldKeys: [],
+				});
 			});
 
 			it("deletes the line when currently editing", () => {
@@ -997,7 +1001,11 @@ describe("TerraDrawPolygonMode", () => {
 				let features = store.copyAll();
 				expect(features.length).toBe(1);
 
-				polygonMode.onKeyUp({ key: "Escape" });
+				polygonMode.onKeyUp({
+					key: "Escape",
+					preventDefault: jest.fn(),
+					heldKeys: [],
+				});
 
 				features = store.copyAll();
 				expect(features.length).toBe(0);
@@ -1025,7 +1033,11 @@ describe("TerraDrawPolygonMode", () => {
 				let features = store.copyAll();
 				expect(features.length).toBe(1);
 
-				polygonMode.onKeyUp({ key: "Escape" });
+				polygonMode.onKeyUp({
+					key: "Escape",
+					preventDefault: jest.fn(),
+					heldKeys: [],
+				});
 
 				features = store.copyAll();
 				expect(features.length).toBe(1);
@@ -1126,6 +1138,8 @@ describe("TerraDrawPolygonMode", () => {
 				// Finish drawing the polygon
 				polygonMode.onKeyUp({
 					key: "Enter",
+					preventDefault: jest.fn(),
+					heldKeys: [],
 				});
 
 				// Creates a new polygon
@@ -1228,6 +1242,8 @@ describe("TerraDrawPolygonMode", () => {
 
 			polygonMode.onKeyUp({
 				key: "Enter",
+				preventDefault: jest.fn(),
+				heldKeys: [],
 			});
 
 			const features = store.copyAll();

diff --git a/src/modes/rectangle/rectangle.mode.spec.ts b/src/modes/rectangle/rectangle.mode.spec.ts
@@ -218,6 +218,8 @@ describe("TerraDrawRectangleMode", () => {
 
 			rectangleMode.onKeyUp({
 				key: "Enter",
+				preventDefault: jest.fn(),
+				heldKeys: [],
 			});
 
 			rectangleMode.onClick({
@@ -262,6 +264,8 @@ describe("TerraDrawRectangleMode", () => {
 
 			rectangleMode.onKeyUp({
 				key: "Enter",
+				preventDefault: jest.fn(),
+				heldKeys: [],
 			});
 
 			features = store.copyAll();
@@ -398,7 +402,11 @@ describe("TerraDrawRectangleMode", () => {
 
 		describe("cancel", () => {
 			it("does nothing when no rectangle is present", () => {
-				rectangleMode.onKeyUp({ key: "Escape" });
+				rectangleMode.onKeyUp({
+					key: "Escape",
+					preventDefault: jest.fn(),
+					heldKeys: [],
+				});
 			});
 
 			it("deletes the rectangle when currently editing", () => {
@@ -414,7 +422,11 @@ describe("TerraDrawRectangleMode", () => {
 				let features = store.copyAll();
 				expect(features.length).toBe(1);
 
-				rectangleMode.onKeyUp({ key: "Escape" });
+				rectangleMode.onKeyUp({
+					key: "Escape",
+					preventDefault: jest.fn(),
+					heldKeys: [],
+				});
 
 				features = store.copyAll();
 				expect(features.length).toBe(0);