Fix Hotkeys TGUI lag and ctrl + r mapping (#4196)

# About the pull request

This PR makes the hotkey tgui lazily refresh (now only refreshes on
action), fixes preventDefault not preventing refreshing, adds a little
more time to bind keys, and fixes a couple depreciations with keyCode.

# Explain why it's good for the game

Fixes #3498
Fixes #3356 

# Testing Photographs and Procedure
<details>
<summary>Screenshots & Videos</summary>


![hotkey](https://github.com/cmss13-devs/cmss13/assets/76988376/6fa75033-a4db-41d3-91c9-a1338a9ee506)

</details>


# Changelog
:cl: Drathek
ui: Fix Hotkeys TGUI lag and the inability to map Ctrl + R. Also now
offers a little bit more time to map combinations of keys.
/:cl:

code/modules/client/tgui_macro.dm

@@ -45,6 +45,7 @@ GLOBAL_LIST_EMPTY(ui_data_keybindings)
 	if(!ui)
 		ui = new(user, src, "KeyBinds", "Keybind Preference")
 		ui.open()
+		ui.set_autoupdate(FALSE)
 
 /datum/tgui_macro/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
 	. = ..()

tgui/packages/tgui/events.js

@@ -203,7 +203,7 @@ document.addEventListener('keydown', (e) => {
   if (canStealFocus(e.target)) {
     return;
   }
-  const code = e.keyCode;
+  const code = e.code;
   const key = new KeyEvent(e, 'keydown', keyHeldByCode[code]);
   globalEvents.emit('keydown', key);
   globalEvents.emit('key', key);
@@ -214,7 +214,7 @@ document.addEventListener('keyup', (e) => {
   if (canStealFocus(e.target)) {
     return;
   }
-  const code = e.keyCode;
+  const code = e.code;
   const key = new KeyEvent(e, 'keyup');
   globalEvents.emit('keyup', key);
   globalEvents.emit('key', key);

tgui/packages/tgui/hotkeys.ts

@@ -73,7 +73,10 @@ const keyCodeToByond = (keyCode: number) => {
 const handlePassthrough = (key: KeyEvent) => {
   const keyString = String(key);
   // In addition to F5, support reloading with Ctrl+R and Ctrl+F5
-  if (keyString === 'Ctrl+F5' || keyString === 'Ctrl+R') {
+  if (
+    !key.event.defaultPrevented &&
+    (keyString === 'Ctrl+F5' || keyString === 'Ctrl+R')
+  ) {
     location.reload();
     return;
   }

tgui/packages/tgui/interfaces/KeyBinds.js

@@ -3,7 +3,6 @@ import { useBackend, useLocalState } from '../backend';
 import { Button, Flex, Section, Box, Input, Dropdown } from '../components';
 import { Window } from '../layouts';
 import { globalEvents } from '../events.js';
-import { createLogger } from '../logging';
 
 const KEY_MODS = {
   'SHIFT': true,
@@ -34,10 +33,6 @@ export const KeyBinds = (props, context) => {
       ? getAllKeybinds(glob_keybinds)
       : glob_keybinds[selectedTab];
 
-  const logger = createLogger('waa');
-
-  logger.warn(keybinds_to_use);
-
   const filteredKeybinds = keybinds_to_use.filter((val) =>
     val.full_name.toLowerCase().match(searchTerm)
   );
@@ -255,7 +250,7 @@ export class ButtonKeybind extends Component {
 
     let pressedKey = e.key.toUpperCase();
 
-    this.finishTimerStart(200);
+    this.finishTimerStart(600);
 
     // Prevents repeating
     if (keysDown[pressedKey] && e.type === 'keydown') {
@@ -284,6 +279,8 @@ export class ButtonKeybind extends Component {
     });
     this.finishTimerStart(2000);
     globalEvents.on('keydown', this.preventPassthrough);
+    globalEvents.on('key', this.preventPassthrough);
+    globalEvents.on('keyup', this.preventPassthrough);
   }
 
   doBlur() {
@@ -292,6 +289,8 @@ export class ButtonKeybind extends Component {
       keysDown: {},
     });
     globalEvents.off('keydown', this.preventPassthrough);
+    globalEvents.off('key', this.preventPassthrough);
+    globalEvents.off('keyup', this.preventPassthrough);
   }
 
   render() {