From 34022ce81eabe9a87c055d93246f53c8392992db Mon Sep 17 00:00:00 2001
From: Jag <77469789+jag3dagster@users.noreply.github.com>
Date: Wed, 14 Dec 2022 09:59:49 -0800
Subject: [PATCH] fix(web/menu): combine initial select and first render checks
 (#172)

* fix(web/menu): Combine initial select and first render

* Combining these checks should fix an issue of having to toggle a checkbox multiple times before it is recognized as being toggled

* Change firstRenderRef current value before first menu movement

* Too many async on change functions are happening let's handle this once the user decides to interact with the menu

* fix(web/menu): remove first render ref check for onSelected

Co-authored-by: Luke <sabolukas03@gmail.com>
---
 web/src/features/menu/list/index.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/web/src/features/menu/list/index.tsx b/web/src/features/menu/list/index.tsx
index fb17c65..e36d6bf 100644
--- a/web/src/features/menu/list/index.tsx
+++ b/web/src/features/menu/list/index.tsx
@@ -50,6 +50,7 @@ const ListMenu: React.FC = () => {
   };
 
   const moveMenu = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (firstRenderRef.current) firstRenderRef.current = false;
     switch (e.code) {
       case 'ArrowDown':
         setSelected((selected) => {
@@ -95,11 +96,7 @@ const ListMenu: React.FC = () => {
   };
 
   useEffect(() => {
-    if (menu.items[selected]?.checked === undefined) return;
-    if (firstRenderRef.current) {
-      firstRenderRef.current = false;
-      return;
-    }
+    if (menu.items[selected]?.checked === undefined || firstRenderRef.current) return;
     const timer = setTimeout(() => {
       fetchNui('changeChecked', [selected, checkedStates[selected]]).catch();
     }, 100);
@@ -107,11 +104,7 @@ const ListMenu: React.FC = () => {
   }, [checkedStates]);
 
   useEffect(() => {
-    if (!menu.items[selected]?.values) return;
-    if (firstRenderRef.current) {
-      firstRenderRef.current = false;
-      return;
-    }
+    if (!menu.items[selected]?.values || firstRenderRef.current) return;
     const timer = setTimeout(() => {
       fetchNui('changeIndex', [selected, indexStates[selected]]).catch();
     }, 100);
@@ -162,6 +155,7 @@ const ListMenu: React.FC = () => {
   useNuiEvent('closeMenu', () => closeMenu(true, undefined, true));
 
   useNuiEvent('setMenu', (data: MenuSettings) => {
+    firstRenderRef.current = true;
     if (!data.startItemIndex || data.startItemIndex < 0) data.startItemIndex = 0;
     else if (data.startItemIndex >= data.items.length) data.startItemIndex = data.items.length - 1;
     setSelected(data.startItemIndex);
@@ -178,7 +172,6 @@ const ListMenu: React.FC = () => {
     setIndexStates(arrayIndexes);
     setCheckedStates(checkedIndexes);
     listRefs.current[data.startItemIndex]?.focus();
-    firstRenderRef.current = true;
   });
 
   return (