From bdc04253535e3379eb8100c206de6a3c3a648c38 Mon Sep 17 00:00:00 2001
From: Rami Berman <rami.berman@up9.com>
Date: Mon, 10 Jan 2022 11:44:36 +0200
Subject: [PATCH] Update GlobalKeydownTrigger.tsx and LoginPage.tsx

---
 ui/src/components/GlobalKeydownTrigger.tsx | 21 +++++++++++++++++++++
 ui/src/components/LoginPage.tsx            |  8 +++++---
 2 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 ui/src/components/GlobalKeydownTrigger.tsx

diff --git a/ui/src/components/GlobalKeydownTrigger.tsx b/ui/src/components/GlobalKeydownTrigger.tsx
new file mode 100644
index 000000000..d857f336c
--- /dev/null
+++ b/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;
diff --git a/ui/src/components/LoginPage.tsx b/ui/src/components/LoginPage.tsx
index 3196f7641..161739a1b 100644
--- a/ui/src/components/LoginPage.tsx
+++ b/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">