fix(nui): kb/mouse focus when opening player modal only

Author: tabarra

nui/src/components/MenuRoot.tsx

@@ -9,14 +9,14 @@ import { useServerCtxValue } from "../state/server.state";
 import { MenuRootContent } from "@nui/src/components/MenuRootContent";
 
 
-
 const MenuRoot: React.FC = () => {
   // We need to mount this here so we can get access to
   // the translation context
   useHudListenersService();
   const curPage = usePageValue();
   const serverCtx = useServerCtxValue()
 
+  if (curPage === txAdminMenuPage.PlayerModalOnly) return null;
   return (
     <>
       <Box

nui/src/hooks/useHudListenersService.tsx

@@ -17,6 +17,7 @@ import { useAnnounceNotiPosValue } from "../state/server.state";
 import { useSetPlayerModalVisibility } from "@nui/src/state/playerModal.state";
 import cleanPlayerName from "@shared/cleanPlayerName";
 import { usePlayerModalContext } from "../provider/PlayerModalProvider";
+import { fetchNui } from "../utils/fetchNui";
 
 type SnackbarAlertSeverities = "success" | "error" | "warning" | "info";
 
@@ -142,14 +143,14 @@ export const useHudListenersService = () => {
 
     //Search by ID
     const targetId = parseInt(target);
-    if (target && !isNaN(targetId)) {
+    if (!isNaN(targetId)) {
       targetPlayer = onlinePlayers.find(
         (playerData) => playerData.id === targetId
       );
     }
 
     //Search by pure name
-    if (!targetPlayer && target && typeof target === "string") {
+    if (!targetPlayer && typeof target === "string") {
       const searchInput = cleanPlayerName(target).pureName;
       const foundPlayers = onlinePlayers.filter((playerData) =>
         playerData.pureName?.includes(searchInput)
@@ -166,7 +167,7 @@ export const useHudListenersService = () => {
     }
 
     if (targetPlayer) {
-      setPage(txAdminMenuPage.Main);
+      setPage(txAdminMenuPage.PlayerModalOnly);
       setAssocPlayer(targetPlayer);
       setModalOpen(true);
     } else {

nui/src/provider/KeyboardNavProvider.tsx

@@ -31,8 +31,9 @@ export const KeyboardNavProvider: React.FC<KeyboardNavProviderProps> = ({
     if (!isMenuVisible) return;
 
     if (
-      curPage === txAdminMenuPage.IFrame ||
-      curPage === txAdminMenuPage.Players
+      curPage === txAdminMenuPage.IFrame
+      || curPage === txAdminMenuPage.Players
+      || curPage === txAdminMenuPage.PlayerModalOnly
     ) {
       return setDisabledKeyNav(true);
     }

nui/src/provider/PlayerModalProvider.tsx

@@ -15,6 +15,7 @@ import {
   usePlayerModalVisibility,
   useSetPlayerModalTab,
 } from "@nui/src/state/playerModal.state";
+import { txAdminMenuPage, usePageValue } from "../state/page.state";
 
 const PlayerContext = createContext<PlayerProviderCtx>({} as PlayerProviderCtx);
 
@@ -49,6 +50,7 @@ export const PlayerModalProvider: React.FC<PlayerModalProviderProps> = ({
   const [menuVisible, setMenuVisible] = useIsMenuVisible();
   const setTab = useSetPlayerModalTab();
   const theme = useTheme();
+  const curPage = usePageValue();
 
   useEffect(() => {
     setDisableTabNav(modalOpen);
@@ -87,7 +89,13 @@ export const PlayerModalProvider: React.FC<PlayerModalProviderProps> = ({
       <Dialog
         open={modalOpen}
         fullWidth
-        onClose={() => setModalOpen(false)}
+        onClose={() => {
+          if (curPage === txAdminMenuPage.PlayerModalOnly) {
+            closeMenu();
+          } else {
+            setModalOpen(false);
+          }
+        }}
         maxWidth="md"
         PaperProps={{
           style: {

nui/src/state/page.state.ts

@@ -9,6 +9,7 @@ export enum txAdminMenuPage {
   Main,
   Players,
   IFrame,
+  PlayerModalOnly,
 }
 
 const pageState = atom<txAdminMenuPage>({