From 4236dd2bfd5eb18aa68beb47f45201862991d0ed Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Mon, 1 Aug 2022 11:13:26 +0200
Subject: [PATCH] feat(web/menu): exit listener and onClose function

---
 resource/interface/client/menu.lua   |  9 +++++++++
 web/src/features/menu/list/index.tsx | 17 +++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/resource/interface/client/menu.lua b/resource/interface/client/menu.lua
index 61714ce..1b824d2 100644
--- a/resource/interface/client/menu.lua
+++ b/resource/interface/client/menu.lua
@@ -45,6 +45,12 @@ RegisterNUICallback('changeSelected', function(data, cb)
     end
 end)
 
+RegisterNUICallback('closeMenu', function(data, cb)
+    cb(1)
+    SetNuiFocus(false, false)
+    if registeredMenus[openMenu].onClose then return registeredMenus[openMenu].onClose() end
+end)
+
 RegisterCommand('testMenu', function()
     lib.registerMenu({
         id = 'epic_menu',
@@ -62,6 +68,9 @@ RegisterCommand('testMenu', function()
             id = 'more_epic_menu',
             title = 'Nicer menu',
             position = 'top-right',
+            onClose = function()
+                lib.showMenu('epic_menu')
+            end,
             options = {
                 {label = 'Extra nice option'},
                 {label = 'Giga nice option'},
diff --git a/web/src/features/menu/list/index.tsx b/web/src/features/menu/list/index.tsx
index 1b48fec..7dc0516 100644
--- a/web/src/features/menu/list/index.tsx
+++ b/web/src/features/menu/list/index.tsx
@@ -52,6 +52,11 @@ const ListMenu: React.FC = () => {
   const [indexStates, setIndexStates] = useState<Record<number, number>>({});
   const listRefs = useRef<Array<HTMLDivElement | null>>([]);
 
+  const closeMenu = () => {
+    setVisible(false);
+    fetchNui("closeMenu");
+  };
+
   const moveMenu = (e: React.KeyboardEvent<HTMLDivElement>) => {
     switch (e.code) {
       case "ArrowDown":
@@ -107,6 +112,18 @@ const ListMenu: React.FC = () => {
     return () => clearTimeout(timer);
   }, [selected, menu, indexStates]);
 
+  useEffect(() => {
+    if (!visible) return;
+
+    const keyHandler = (e: KeyboardEvent) => {
+      if (["Escape"].includes(e.code)) closeMenu();
+    };
+
+    window.addEventListener("keydown", keyHandler);
+
+    return () => window.removeEventListener("keydown", keyHandler);
+  }, [visible]);
+
   useNuiEvent("setMenu", (data: MenuSettings) => {
     if (!data.position) data.position = "top-left";
     listRefs.current = [];