fix: prevent scroll to top on modal close

src/rewards/ContractCall/ContractCallCardMenu.tsx

@@ -9,6 +9,7 @@ import useGuildPermission from "components/[guild]/hooks/useGuildPermission"
 import useWeb3ConnectionManager from "components/_app/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
 import EditNFTDescriptionModal from "./components/EditNFTDescriptionModal"
 import EditNftModal from "./components/EditNftModal"
+import { useRef } from "react"
 
 type Props = {
   platformGuildId: string
@@ -26,6 +27,7 @@ const ContractCallCardMenu = ({ platformGuildId }: Props): JSX.Element => {
     onOpen: legacyOnOpen,
     onClose: legacyOnClose,
   } = useDisclosure()
+  const ref = useRef(null)
 
   const isLegacy =
     guildPlatform.platformGuildData.function ===
@@ -45,7 +47,11 @@ const ContractCallCardMenu = ({ platformGuildId }: Props): JSX.Element => {
   return (
     <>
       <PlatformCardMenu>
-        <MenuItem icon={<PencilSimple />} onClick={isLegacy ? legacyOnOpen : onOpen}>
+        <MenuItem
+          icon={<PencilSimple />}
+          onClick={isLegacy ? legacyOnOpen : onOpen}
+          ref={ref}
+        >
           {isLegacy ? "Edit NFT description" : "Edit NFT"}
         </MenuItem>
         <RemovePlatformMenuItem platformGuildId={platformGuildId} />
@@ -59,6 +65,7 @@ const ContractCallCardMenu = ({ platformGuildId }: Props): JSX.Element => {
         />
       ) : (
         <EditNftModal
+          finalFocusRef={ref}
           isOpen={isOpen}
           onClose={onClose}
           guildPlatform={guildPlatform}

src/rewards/ContractCall/components/EditNftModal.tsx

@@ -19,7 +19,7 @@ import useNftDetails from "components/[guild]/collect/hooks/useNftDetails"
 import useGuild from "components/[guild]/hooks/useGuild"
 import Button from "components/common/Button"
 import { Modal } from "components/common/Modal"
-import { useCallback } from "react"
+import { MutableRefObject, useCallback } from "react"
 import { FormProvider, useForm, useWatch } from "react-hook-form"
 import { GuildPlatform } from "types"
 import { formatUnits } from "viem"
@@ -31,9 +31,10 @@ type Props = {
   isOpen: boolean
   onClose: () => void
   guildPlatform: GuildPlatform
+  finalFocusRef?: MutableRefObject<null>
 }
 
-const EditNftModal = ({ isOpen, onClose, guildPlatform }: Props) => {
+const EditNftModal = ({ isOpen, onClose, guildPlatform, finalFocusRef }: Props) => {
   const { chain, contractAddress } = guildPlatform.platformGuildData
 
   const { roles } = useGuild()
@@ -61,6 +62,7 @@ const EditNftModal = ({ isOpen, onClose, guildPlatform }: Props) => {
       scrollBehavior="inside"
       colorScheme="dark"
       size="4xl"
+      finalFocusRef={finalFocusRef}
     >
       <ModalOverlay />
       <ModalContent>

src/rewards/Forms/EditFormModal.tsx

@@ -21,14 +21,16 @@ import { FormProvider, useForm } from "react-hook-form"
 import { uuidv7 } from "uuidv7"
 import { z } from "zod"
 import useEditForm from "./hooks/useEditForm"
+import { MutableRefObject } from "react"
 
 type Props = {
   isOpen: boolean
   onClose: () => void
   form: Schemas["Form"]
+  finalFocusRef?: MutableRefObject<null>
 }
 
-const EditFormModal = ({ isOpen, onClose, form }: Props) => {
+const EditFormModal = ({ isOpen, onClose, form, finalFocusRef }: Props) => {
   const methods = useForm<z.input<typeof FormCreationSchema>>({
     mode: "all",
     resolver: zodResolver(FormCreationSchema),
@@ -93,6 +95,7 @@ const EditFormModal = ({ isOpen, onClose, form }: Props) => {
         size="4xl"
         colorScheme="dark"
         scrollBehavior="inside"
+        finalFocusRef={finalFocusRef}
       >
         <ModalOverlay />
         <ModalContent maxH="100vh !important">

src/rewards/Forms/FormCardMenu.tsx

@@ -6,6 +6,7 @@ import { useGuildForm } from "components/[guild]/hooks/useGuildForms"
 import LinkMenuItem from "components/common/LinkMenuItem"
 import PlatformCardMenu from "../../components/[guild]/RolePlatforms/components/PlatformCard/components/PlatformCardMenu"
 import EditFormModal from "./EditFormModal"
+import { ElementRef, useRef } from "react"
 
 type Props = {
   platformGuildId: string
@@ -17,6 +18,7 @@ const FormCardMenu = ({ platformGuildId }: Props): JSX.Element => {
     (gp) => gp.platformGuildId === platformGuildId
   )
   const formId = guildPlatform?.platformGuildData?.formId
+  const ref = useRef(null)
 
   const { form } = useGuildForm(formId)
 
@@ -25,7 +27,7 @@ const FormCardMenu = ({ platformGuildId }: Props): JSX.Element => {
   return (
     <>
       <PlatformCardMenu>
-        <MenuItem icon={<PencilSimple />} onClick={onOpen}>
+        <MenuItem icon={<PencilSimple />} onClick={onOpen} ref={ref}>
           Edit form
         </MenuItem>
 
@@ -39,7 +41,14 @@ const FormCardMenu = ({ platformGuildId }: Props): JSX.Element => {
         <RemovePlatformMenuItem platformGuildId={platformGuildId} />
       </PlatformCardMenu>
 
-      {!!form && <EditFormModal isOpen={isOpen} onClose={onClose} form={form} />}
+      {!!form && (
+        <EditFormModal
+          isOpen={isOpen}
+          onClose={onClose}
+          form={form}
+          finalFocusRef={ref}
+        />
+      )}
     </>
   )
 }