Update GlobalKeydownTrigger.tsx and LoginPage.tsx

ui/src/components/GlobalKeydownTrigger.tsx

@@ -0,0 +1,21 @@
+import React, {useEffect, useMemo, useState} from "react";
+
+interface GlobalKeydownTriggerProps {
+    onKeyDown: (key: string) => void;
+}
+
+const GlobalKeydownTrigger: React.FC<GlobalKeydownTriggerProps> = ({onKeyDown}) => {
+    // @ts-ignore
+    useEffect(() => {
+        const keyDownHandler = e => onKeyDown(e.key);   
+        document.addEventListener("keydown", keyDownHandler);
+        return () => {
+            //clean up listener on unmount or on callback change
+            document.removeEventListener("keydown", keyDownHandler);
+        }
+    }, [onKeyDown]);
+
+    return <></>
+};
+
+export default GlobalKeydownTrigger;

ui/src/components/LoginPage.tsx

@@ -4,6 +4,7 @@ import { toast } from "react-toastify";
 import { MizuContext, Page } from "../EntApp";
 import Api from "../helpers/api";
 import { useCommonStyles } from "../helpers/commonStyle";
+import GlobalKeydownTrigger from "./GlobalKeydownTrigger";
 import LoadingOverlay from "./LoadingOverlay";
 
 const api = Api.getInstance();
@@ -35,14 +36,15 @@ const LoginPage: React.FC = () => {
         }
     }
 
-    const handleFormOnKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === "Enter") {
+    const handleFormOnKeyPress = (key: string) => {
+        if (key === "Enter") {
             onFormSubmit();
         }
     };
 
 
-    return <div className="centeredForm" onKeyPress={handleFormOnKeyPress}>
+    return <div className="centeredForm">
+            <GlobalKeydownTrigger onKeyDown={handleFormOnKeyPress}/>
             {isLoading && <LoadingOverlay/>}
             <div className="form-title left-text">Login</div>
             <div className="form-input">