From cb9e281c45791ebdabe2e0727ae5ae7ffa8db1d7 Mon Sep 17 00:00:00 2001
From: catloversg <152669316+catloversg@users.noreply.github.com>
Date: Mon, 11 Nov 2024 13:54:51 +0700
Subject: [PATCH] UI: Auto focus hashnet upgrade modal (#1768)

---
 src/Hacknet/ui/HacknetRoot.tsx      | 10 +++++++++-
 src/Hacknet/ui/HashUpgradeModal.tsx |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/Hacknet/ui/HacknetRoot.tsx b/src/Hacknet/ui/HacknetRoot.tsx
index 1d9eeb3d4..81a99e9e3 100644
--- a/src/Hacknet/ui/HacknetRoot.tsx
+++ b/src/Hacknet/ui/HacknetRoot.tsx
@@ -110,7 +110,15 @@ export function HacknetRoot(): React.ReactElement {
 
       {hasHacknetServers() && (
         <>
-          <Button onClick={() => setOpen(true)}>Spend Hashes on Upgrades</Button>
+          {/* 
+          The usage of focusRipple in this button is intentional. Without it, after closing the modal by pressing the
+          Esc button, this button has a weird ripple effect (only on Chrome).
+          The documentation says that focusRipple is false by default, but I have to explicitly set it to false to fix
+          this weird ripple effect.
+          */}
+          <Button focusRipple={false} onClick={() => setOpen(true)}>
+            Spend Hashes on Upgrades
+          </Button>
           <br />
         </>
       )}
diff --git a/src/Hacknet/ui/HashUpgradeModal.tsx b/src/Hacknet/ui/HashUpgradeModal.tsx
index 46ebf5287..3d1ea5521 100644
--- a/src/Hacknet/ui/HashUpgradeModal.tsx
+++ b/src/Hacknet/ui/HashUpgradeModal.tsx
@@ -24,7 +24,7 @@ export function HashUpgradeModal(props: IProps): React.ReactElement {
   }
 
   return (
-    <Modal open={props.open} onClose={props.onClose}>
+    <Modal open={props.open} onClose={props.onClose} removeFocus={false}>
       <>
         <Typography>Spend your hashes on a variety of different upgrades</Typography>
         <Typography>