From d2d75721d938de529e3fbc96628e77ebba0a2277 Mon Sep 17 00:00:00 2001
From: Martin Berg Alstad <600878@stud.hvl.no>
Date: Sat, 14 Jan 2023 15:03:31 +0100
Subject: [PATCH] Menu will always close when clicking outside the menu, press
 Escape to close open menu

---
 src/components/menu.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/menu.tsx b/src/components/menu.tsx
index 604e2fb..5b9abe2 100644
--- a/src/components/menu.tsx
+++ b/src/components/menu.tsx
@@ -40,24 +40,32 @@ const MyMenu: Component<MenuProps> = (
             }
         }
 
+        function keypress(e: KeyboardEvent): void {
+            if (e.key === "Escape") {
+                closeMenu();
+            }
+        }
+
         if (isOpen()) {
             document.addEventListener("click", click);
+            document.addEventListener("keyup", keypress);
         }
         else {
             document.removeEventListener("click", click);
+            document.removeEventListener("keyup", keypress);
         }
     });
 
     return ( // TODO transition
         <div class={ `${ className }` } id={ id }>
 
-            <Button title={ title ?? undefined }
+            <Button title={ title }
                     onClick={ toggleMenu }
                     className={ `flex-row-center ${ buttonClassName }` }>
                 { button }
             </Button>
 
-            <Show when={isOpen()} keyed>
+            <Show when={ isOpen() } keyed>
                 <div
                     class={ `absolute bg-default-bg border border-gray-500 rounded-b-xl mt-1 w-max z-50 ${ itemsClassName }` }>
                     <div class={ "mx-1" }>{ children }</div>