update: use store injection in UserSelection component

fix: keypress not displaying working properly

src/hooks/useKeyPress.ts

@@ -1,38 +1,45 @@
 import { isInputDOMNode } from '../utils';
 import { KeyCode } from '../types';
-import { onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref, Ref } from 'vue';
 
-export default (keyCode?: KeyCode): boolean => {
+export default (keyCode?: KeyCode): Ref<boolean> => {
   const keyPressed = ref<boolean>(false);
 
-  onMounted(() => {
+  const downHandler = (event: KeyboardEvent) => {
+    if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
+      event.preventDefault();
+      keyPressed.value = true;
+    }
+  };
+
+  const upHandler = (event: KeyboardEvent) => {
+    if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
+      keyPressed.value = false;
+    }
+  };
+
+  const resetHandler = () => (keyPressed.value = false);
+
+  const bindEvents = () => {
     if (typeof keyCode !== 'undefined') {
-      const downHandler = (event: KeyboardEvent) => {
-        if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
-          event.preventDefault();
-          keyPressed.value = true;
-        }
-      };
-
-      const upHandler = (event: KeyboardEvent) => {
-        if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
-          keyPressed.value = false;
-        }
-      };
-
-      const resetHandler = () => (keyPressed.value = false);
-
       window.addEventListener('keydown', downHandler);
       window.addEventListener('keyup', upHandler);
       window.addEventListener('blur', resetHandler);
-
-      return () => {
-        window.removeEventListener('keydown', downHandler);
-        window.removeEventListener('keyup', upHandler);
-        window.removeEventListener('blur', resetHandler);
-      };
     }
+  };
+
+  const unbindEvents = () => {
+    window.removeEventListener('keydown', downHandler);
+    window.removeEventListener('keyup', upHandler);
+    window.removeEventListener('blur', resetHandler);
+  };
+
+  onMounted(() => {
+    bindEvents();
+  });
+  onBeforeUnmount(() => {
+    unbindEvents();
   });
 
-  return keyPressed.value;
+  return keyPressed;
 };