refactor(menu): split side and vertical scroll change handlers

Resolves an issue where changing to the next button while scrolling a horizontal list would not trigger the onChange function for the previous button

resource/interface/client/menu.lua

@@ -36,28 +36,27 @@ function lib.getOpenMenu() return openMenu end
 
 RegisterNUICallback('confirmSelected', function(data, cb)
     cb(1)
-    local selected = type(data) == 'number' and data+1 or data[1]
+    local selected = {data[1] + 1, data[2] and data[2] + 1} -- data = [selected, scrollIndex]
     local menu = registeredMenus[openMenu]
-    if menu.options[selected].close ~= false then SetNuiFocus(false, false) end
+    if menu.options[selected[1]].close ~= false then SetNuiFocus(false, false) end
-    local args = menu.options[selected].args
+    local args = menu.options[selected[1]].args
-    if type(data) == 'number' then
+	registeredMenus[openMenu].cb(selected[1], selected[2], args)
-        registeredMenus[openMenu].cb(data, nil, args)
+end)
-    else
+
-        registeredMenus[openMenu].cb(data[1], data[2], args)
+RegisterNUICallback('changeIndex', function(data, cb)
-    end
+	cb(1)
+	if not registeredMenus[openMenu].onSideScroll then return end
+	local selected = {data[1] + 1, data[2] and data[2] + 1} -- data = [selected, scrollIndex]
+	local args = registeredMenus[openMenu].options[selected[1]].args
+	registeredMenus[openMenu].onSideScroll(selected[1], selected[2], args)
 end)
 
 RegisterNUICallback('changeSelected', function(data, cb)
     cb(1)
-    if not registeredMenus[openMenu].onChange then return end
+    if not registeredMenus[openMenu].onSelected then return end
-    local selected = data
+    local selected = {data[1] + 1, data[2] and data[2] + 1} -- data = [selected, scrollIndex]
-    if type(selected) == 'number' then
+    local args = registeredMenus[openMenu].options[selected[1]].args
-		local args = registeredMenus[openMenu].options[selected+1].args
+	registeredMenus[openMenu].onSelected(selected[1], selected[2], args)
-        registeredMenus[openMenu].onChange(selected, nil, args)
-    else
-		local args = registeredMenus[openMenu].options[selected[1]+1].args
-        registeredMenus[openMenu].onChange(selected[1], selected[2], args)
-    end
 end)
 
 RegisterNUICallback('closeMenu', function(data, cb)
@@ -88,10 +87,17 @@ RegisterCommand('testMenu', function()
 				--lib.setMenuOptions('epic_menu', {label = 'Not nice'}, 1)
                 --lib.showMenu('epic_menu')
             end,
+			onSelected = function(selected, scrollIndex, args)
+				print('selected: ', selected, scrollIndex)
+			end,
+			onSideScroll = function(selected, scrollIndex, args)
+				print('sideScroll: ', selected, scrollIndex)
+			end,
             options = {
                 {label = 'Extra nice option', args = 'Hello there', close = false},
                 {label = 'Giga nice option'},
                 {label = 'Omega nice option'},
+				{label = 'Values', values={'hello', 'there', 'general', 'kenobi'}}
             }
         }, function(selected, scrollIndex, args)
             print(selected, scrollIndex, args)

web/src/features/menu/list/index.tsx

@@ -8,6 +8,7 @@ import FocusTrap from "focus-trap-react";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { fetchNui } from "../../../utils/fetchNui";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
 
 export interface MenuItem {
   label: string;
@@ -106,15 +107,20 @@ const ListMenu: React.FC = () => {
         break;
       case "Enter":
         if (!menu.items[selected]) return;
-        fetchNui(
+        fetchNui("confirmSelected", [selected, indexStates[selected]]).catch();
-          "confirmSelected",
-          Array.isArray(menu.items[selected].values) ? [selected, indexStates[selected]] : selected
-        );
         if (menu.items[selected].close === undefined || menu.items[selected].close) setVisible(false);
         break;
     }
   };
 
+  useEffect(() => {
+    if (!menu.items[selected]?.values) return;
+    const timer = setTimeout(() => {
+      fetchNui("changeIndex", [selected, indexStates[selected]]).catch();
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [indexStates]);
+
   useEffect(() => {
     if (!menu.items[selected]) return;
     listRefs.current[selected]?.scrollIntoView({
@@ -124,13 +130,10 @@ const ListMenu: React.FC = () => {
     listRefs.current[selected]?.focus({ preventScroll: true });
     // debounces the callback to avoid spam
     const timer = setTimeout(() => {
-      fetchNui(
+      fetchNui("changeSelected", [selected, indexStates[selected]]).catch();
-        "changeSelected",
+    }, 100);
-        Array.isArray(menu.items[selected].values) ? [selected, indexStates[selected]] : selected
-      );
-    }, 500);
     return () => clearTimeout(timer);
-  }, [selected, menu, indexStates]);
+  }, [selected, menu]);
 
   useEffect(() => {
     if (!visible) return;
@@ -197,17 +200,11 @@ const ListMenu: React.FC = () => {
               <FocusTrap active={visible}>
                 <Stack direction="column" p={2} overflowY="scroll">
                   {menu.items.map((item, index) => (
-                    <>
+                    <React.Fragment key={`menu-item-${index}`}>
                       {item.label && (
-                        <ListItem
+                        <ListItem index={index} item={item} scrollIndex={indexStates[index]} ref={listRefs} />
-                          index={index}
-                          item={item}
-                          scrollIndex={indexStates[index]}
-                          ref={listRefs}
-                          key={`menu-item-${index}`}
-                        />
                       )}
-                    </>
+                    </React.Fragment>
                   ))}
                 </Stack>
               </FocusTrap>