refactor: use KeyboardEvent.code instead of key

...wherever applicable. About `key.toLowerCase()`: it appears that it was unnecessary.
deltachat · Sep 17, 2024 · fe43c36 · fe43c36
1 parent 43fad65
commit fe43c36
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 17 deletions.
diff --git a/packages/frontend/src/components/ContextMenu.tsx b/packages/frontend/src/components/ContextMenu.tsx
@@ -254,22 +254,22 @@ export function ContextMenu(props: {
     const onKeyDown = (ev: KeyboardEvent) => {
       const current = parent?.querySelector(':focus')
 
-      if (ev.key == 'ArrowDown') {
+      if (ev.code == 'ArrowDown') {
         if (current && current.nextElementSibling) {
           ;(current.nextElementSibling as HTMLDivElement)?.focus()
         } else {
           ;(parent?.firstElementChild as HTMLDivElement).focus()
         }
-      } else if (ev.key == 'ArrowUp') {
+      } else if (ev.code == 'ArrowUp') {
         if (current && current.previousElementSibling) {
           ;(current.previousElementSibling as HTMLDivElement)?.focus()
         } else {
           ;(parent?.lastElementChild as HTMLDivElement).focus()
         }
-      } else if (ev.key == 'ArrowLeft') {
+      } else if (ev.code == 'ArrowLeft') {
         setSublevels(l => l.slice(0, Math.max(0, l.length - 1)))
         keyboardFocus.current = openSublevels[openSublevels.length - 1]
-      } else if (ev.key == 'ArrowRight') {
+      } else if (ev.code == 'ArrowRight') {
         if (current) {
           const el = current as HTMLDivElement
           const index = parseInt(el.dataset.expandableIndex as string, 10)
@@ -278,11 +278,11 @@ export function ContextMenu(props: {
             keyboardFocus.current = 0
           }
         }
-      } else if (ev.key == 'Enter') {
+      } else if (ev.code == 'Enter') {
         if (current) {
           ;(current as HTMLDivElement)?.click()
         }
-      } else if (ev.key == 'Escape') {
+      } else if (ev.code == 'Escape') {
         closeCallback()
         keyboardFocus.current = -1
       }

diff --git a/packages/frontend/src/components/composer/Composer.tsx b/packages/frontend/src/components/composer/Composer.tsx
@@ -179,10 +179,10 @@ const Composer = forwardRef<
   // also handle escape key for emoji picker
   useEffect(() => {
     const onKey = (ev: KeyboardEvent) => {
-      if (ev.key === 'Shift') {
+      if (ev.code === 'Shift') {
         shiftPressed.current = ev.shiftKey
       }
-      if (ev.type === 'keydown' && ev.key === 'Escape') {
+      if (ev.type === 'keydown' && ev.code === 'Escape') {
         setShowEmojiPicker(false)
       }
     }

diff --git a/packages/frontend/src/components/composer/ComposerMessageInput.tsx b/packages/frontend/src/components/composer/ComposerMessageInput.tsx
@@ -141,13 +141,13 @@ export default class ComposerMessageInput extends React.Component<
     const enterKeySends = this.props.enterKeySends
 
     // ENTER + SHIFT
-    if (e.key === 'Enter' && e.shiftKey) {
+    if (e.code === 'Enter' && e.shiftKey) {
       return 'NEWLINE'
       // ENTER + CTRL
-    } else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+    } else if (e.code === 'Enter' && (e.ctrlKey || e.metaKey)) {
       return 'SEND'
       // ENTER
-    } else if (e.key === 'Enter' && !e.shiftKey) {
+    } else if (e.code === 'Enter' && !e.shiftKey) {
       return enterKeySends ? 'SEND' : 'NEWLINE'
     }
   }

diff --git a/packages/frontend/src/components/dialogs/AddMember/AddMemberInnerDialog.tsx b/packages/frontend/src/components/dialogs/AddMember/AddMemberInnerDialog.tsx
@@ -197,7 +197,7 @@ export function AddMemberInnerDialog({
   }
 
   const addContactOnKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
-    if (ev.key == 'Enter') {
+    if (ev.code == 'Enter') {
       ;(
         document.querySelector<HTMLDivElement>(
           '.delta-checkbox'

diff --git a/packages/frontend/src/components/dialogs/FullscreenMedia.tsx b/packages/frontend/src/components/dialogs/FullscreenMedia.tsx
@@ -233,9 +233,9 @@ export default function FullscreenMedia(props: Props & DialogProps) {
       }
       ev.preventDefault()
       ev.stopPropagation()
-      if (ev.key == 'ArrowLeft') {
+      if (ev.code == 'ArrowLeft') {
         previousImage()
-      } else if (ev.key == 'ArrowRight') {
+      } else if (ev.code == 'ArrowRight') {
         nextImage()
       }
     }

diff --git a/packages/frontend/src/components/message/MessageListAndComposer.tsx b/packages/frontend/src/components/message/MessageListAndComposer.tsx
@@ -238,7 +238,7 @@ export default function MessageListAndComposer({ accountId, chat }: Props) {
   }
 
   const onEscapeKeyUp = (ev: KeyboardEvent) => {
-    if (ev.key === 'Escape') {
+    if (ev.code === 'Escape') {
       messageInputRef?.current?.focus()
     }
   }

diff --git a/packages/target-electron/src/deltachat/webxdc.ts b/packages/target-electron/src/deltachat/webxdc.ts
@@ -433,7 +433,7 @@ If you think that's a bug and you need that permission, then please open an issu
       )
 
       webxdcWindow.webContents.on('before-input-event', (event, input) => {
-        if (input.key.toLowerCase() === 'f12') {
+        if (input.code === 'F12') {
           if (DesktopSettings.state.enableWebxdcDevTools) {
             webxdcWindow.webContents.toggleDevTools()
             event.preventDefault()

diff --git a/packages/target-electron/static/webxdc-preload.js b/packages/target-electron/static/webxdc-preload.js
@@ -303,7 +303,7 @@ class RealtimeListener {
   })
 
   const keydown_handler = ev => {
-    if (ev.key == 'Escape') {
+    if (ev.code == 'Escape') {
       ipcRenderer.invoke('webxdc.exitFullscreen')
     }
   }