feat(web/menu): exit listener and onClose function

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'},

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 = [];