From e7fe8c3af5e9eaa7f896cab828f8462e7f2f072b Mon Sep 17 00:00:00 2001 From: Dominik Stumpf Date: Mon, 24 Jun 2024 09:54:51 +0200 Subject: [PATCH 1/2] fix: prevent scroll to top on modal close --- src/components/common/Modal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx index d46f5ca521..a65187e796 100644 --- a/src/components/common/Modal.tsx +++ b/src/components/common/Modal.tsx @@ -12,7 +12,7 @@ const Modal = ({ children, ...rest }: ModalProps): JSX.Element => { const transition = useBreakpointValue(transitionValues) return ( - + {children} ) @@ -22,7 +22,7 @@ const Alert = ({ children, ...rest }: AlertDialogProps): JSX.Element => { const transition = useBreakpointValue(transitionValues) return ( - + {children} ) From 1f650db325874a1dd6b500ac1b80f14c1d5574f4 Mon Sep 17 00:00:00 2001 From: Dominik Stumpf Date: Wed, 3 Jul 2024 22:43:49 +0200 Subject: [PATCH 2/2] chore: define focus restoration explicitly --- src/components/common/Modal.tsx | 4 ++-- src/rewards/ContractCall/ContractCallCardMenu.tsx | 9 ++++++++- .../ContractCall/components/EditNftModal.tsx | 6 ++++-- src/rewards/Forms/EditFormModal.tsx | 5 ++++- src/rewards/Forms/FormCardMenu.tsx | 13 +++++++++++-- 5 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx index a65187e796..d46f5ca521 100644 --- a/src/components/common/Modal.tsx +++ b/src/components/common/Modal.tsx @@ -12,7 +12,7 @@ const Modal = ({ children, ...rest }: ModalProps): JSX.Element => { const transition = useBreakpointValue(transitionValues) return ( - + {children} ) @@ -22,7 +22,7 @@ const Alert = ({ children, ...rest }: AlertDialogProps): JSX.Element => { const transition = useBreakpointValue(transitionValues) return ( - + {children} ) 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 && ( + + )} ) }