From 6a0bb74418cd99b678e959afbf7c4bfe9136dc74 Mon Sep 17 00:00:00 2001
From: Kamieljv <kamiel.verhelst@proton.me>
Date: Fri, 3 Jan 2025 17:45:00 +0100
Subject: [PATCH] Changed event.keyCode to event.key or event.code

---
 src/components/base/base-arrow.js |  6 +++---
 src/components/map-draw.js        | 11 ++++++-----
 src/components/map-search.js      |  2 +-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/base/base-arrow.js b/src/components/base/base-arrow.js
index 8a5af9a..82eefa5 100644
--- a/src/components/base/base-arrow.js
+++ b/src/components/base/base-arrow.js
@@ -46,19 +46,19 @@ class BaseArrow extends LitElement {
     }
     _click(event) {
         if (event instanceof KeyboardEvent) {
-            if (event.keyCode === 38) {
+            if (event.key === 'ArrowUp') {
                 /* up arrow key */
                 this.open = false;
                 event.stopPropagation();
                 return;
             }
-            if (event.keyCode === 40) {
+            if (event.key === 'ArrowDown') {
                 /* down arrow key */
                 this.open = true;
                 event.stopPropagation();
                 return;
             }
-            if (event.keyCode !== 32 && event.keyCode !== 13) {
+            if (event.code !== 'Space' && event.key !== 'Enter') {
                 return;
             }
         }
diff --git a/src/components/map-draw.js b/src/components/map-draw.js
index 0a9c3cc..b3b58c9 100644
--- a/src/components/map-draw.js
+++ b/src/components/map-draw.js
@@ -621,22 +621,23 @@ class MapDraw extends LitElement {
   _keyDown(event) {
     if (!((event.srcElement || event.target).classList.contains('mapboxgl-canvas') || 
       (event.srcElement || event.target).classList.contains('maplibregl-canvas'))) return; // we only handle events on the map
-    if ((event.keyCode === 8 || event.keyCode === 46)) {
+    if ((event.key === 'Backspace' || event.key === 'Delete')) {
       this.mbDraw.trash();
       event.preventDefault();
-    } else if (event.keyCode === 49) {
+    } else if (event.key === '1') {
       this._changeMode('draw_point');
-    } else if (event.keyCode === 50) {
+    } else if (event.key === '2') {
       this._changeMode('draw_line_string');
-    } else if (event.keyCode === 51) {
+    } else if (event.key === '3') {
       this._changeMode('draw_polygon');
-    } else if (event.keyCode === 27) {
+    } else if (event.key === 'Escape') {
       this._setMode('simple_select');
     } else if (event.key === 'z' && event.ctrlKey) {
       this._undo();
     } else if (event.key === 'y' && event.ctrlKey) {
       this._redo();
     }
+    console.log(event.key)
   }
   _isEmptyNewLayer(layer) {
     return layer.isnewlayer;
diff --git a/src/components/map-search.js b/src/components/map-search.js
index f7093a8..de08ab0 100644
--- a/src/components/map-search.js
+++ b/src/components/map-search.js
@@ -148,7 +148,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
   }
 
   keyup(e) {
-    if (e.keyCode == 13) {
+    if (e.key == 'Enter') {
       this.search(e);
     } else {
       this.resultList = null;