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}
+ />
+ )}
  </>
  )
 }