diff --git a/src/rewards/ContractCall/ContractCallCardMenu.tsx b/src/rewards/ContractCall/ContractCallCardMenu.tsx index 91a2d7c4b1..1ec8d32c48 100644 --- a/src/rewards/ContractCall/ContractCallCardMenu.tsx +++ b/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 ( <> - } onClick={isLegacy ? legacyOnOpen : onOpen}> + } + onClick={isLegacy ? legacyOnOpen : onOpen} + ref={ref} + > {isLegacy ? "Edit NFT description" : "Edit NFT"} @@ -59,6 +65,7 @@ const ContractCallCardMenu = ({ platformGuildId }: Props): JSX.Element => { /> ) : ( void guildPlatform: GuildPlatform + finalFocusRef?: MutableRefObject } -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} > diff --git a/src/rewards/Forms/EditFormModal.tsx b/src/rewards/Forms/EditFormModal.tsx index cdee7e00ab..ddbc7f0ea5 100644 --- a/src/rewards/Forms/EditFormModal.tsx +++ b/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 } -const EditFormModal = ({ isOpen, onClose, form }: Props) => { +const EditFormModal = ({ isOpen, onClose, form, finalFocusRef }: Props) => { const methods = useForm>({ mode: "all", resolver: zodResolver(FormCreationSchema), @@ -93,6 +95,7 @@ const EditFormModal = ({ isOpen, onClose, form }: Props) => { size="4xl" colorScheme="dark" scrollBehavior="inside" + finalFocusRef={finalFocusRef} > diff --git a/src/rewards/Forms/FormCardMenu.tsx b/src/rewards/Forms/FormCardMenu.tsx index 5037c0eb85..f93fb541aa 100644 --- a/src/rewards/Forms/FormCardMenu.tsx +++ b/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 ( <> - } onClick={onOpen}> + } onClick={onOpen} ref={ref}> Edit form @@ -39,7 +41,14 @@ const FormCardMenu = ({ platformGuildId }: Props): JSX.Element => { - {!!form && } + {!!form && ( + + )} ) }