From 8b2a28ca69df862b0ddea2890fdb62efa5df2adf Mon Sep 17 00:00:00 2001
From: tabarra <1808295+tabarra@users.noreply.github.com>
Date: Wed, 16 Oct 2024 22:21:46 -0300
Subject: [PATCH] fix(menu): release mouse on player modal X click (#993)

---
 nui/src/components/PlayerModal/PlayerModal.tsx | 11 +++++------
 nui/src/provider/PlayerModalProvider.tsx       | 18 ++++++++++--------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/nui/src/components/PlayerModal/PlayerModal.tsx b/nui/src/components/PlayerModal/PlayerModal.tsx
index f68e20b25..e3486e226 100644
--- a/nui/src/components/PlayerModal/PlayerModal.tsx
+++ b/nui/src/components/PlayerModal/PlayerModal.tsx
@@ -76,15 +76,14 @@ const StyledCloseButton = styled(IconButton)(({ theme }) => ({
   right: theme.spacing(2),
 }));
 
-const PlayerModal: React.FC = () => {
+type PlayerModalProps = {
+  onClose: () => void
+};
+const PlayerModal: React.FC<PlayerModalProps> = ({onClose}) => {
   const setModalOpen = useSetPlayerModalVisibility();
   const playerDetails = usePlayerDetailsValue();
   const assocPlayer = useAssociatedPlayerValue();
 
-  const handleClose = () => {
-    setModalOpen(false);
-  };
-
   if (!assocPlayer) return null;
 
   const error = (playerDetails as any).error;
@@ -94,7 +93,7 @@ const PlayerModal: React.FC = () => {
       <DialogTitle style={{ borderBottom: "1px solid rgba(221,221,221,0.54)" }}>
         [{assocPlayer.id}]{" "}
         {playerDetails?.player?.displayName ?? assocPlayer.displayName}
-        <StyledCloseButton onClick={handleClose} size="large">
+        <StyledCloseButton onClick={onClose} size="large">
           <Close />
         </StyledCloseButton>
       </DialogTitle>
diff --git a/nui/src/provider/PlayerModalProvider.tsx b/nui/src/provider/PlayerModalProvider.tsx
index a6119c250..27c58da37 100644
--- a/nui/src/provider/PlayerModalProvider.tsx
+++ b/nui/src/provider/PlayerModalProvider.tsx
@@ -79,6 +79,14 @@ export const PlayerModalProvider: React.FC<PlayerModalProviderProps> = ({
     });
   }, []);
 
+  const handleClose = () => {
+    if (curPage === txAdminMenuPage.PlayerModalOnly) {
+      closeMenu();
+    } else {
+      setModalOpen(false);
+    }
+  }
+
   return (
     <PlayerContext.Provider
       value={{
@@ -89,13 +97,7 @@ export const PlayerModalProvider: React.FC<PlayerModalProviderProps> = ({
       <Dialog
         open={modalOpen}
         fullWidth
-        onClose={() => {
-          if (curPage === txAdminMenuPage.PlayerModalOnly) {
-            closeMenu();
-          } else {
-            setModalOpen(false);
-          }
-        }}
+        onClose={handleClose}
         maxWidth="md"
         PaperProps={{
           style: {
@@ -108,7 +110,7 @@ export const PlayerModalProvider: React.FC<PlayerModalProviderProps> = ({
         }}
       >
         <React.Suspense fallback={<LoadingModal />}>
-          <PlayerModal />
+          <PlayerModal onClose={handleClose} />
         </React.Suspense>
       </Dialog>
       {children}