From f57956089253087314461c6ae20ad76fd56de2bb Mon Sep 17 00:00:00 2001 From: Vincent Wilson Date: Fri, 26 Jan 2024 13:05:49 -0500 Subject: [PATCH] Ensure scroll to top on content change --- packages/web-shared/components/Modal/Modal.js | 40 +++++---- packages/web-shared/providers/AppProvider.js | 2 +- web-embeds/public/index.html | 90 +++++++++---------- 3 files changed, 67 insertions(+), 65 deletions(-) diff --git a/packages/web-shared/components/Modal/Modal.js b/packages/web-shared/components/Modal/Modal.js index 550198e2..b903fda0 100644 --- a/packages/web-shared/components/Modal/Modal.js +++ b/packages/web-shared/components/Modal/Modal.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useRef } from 'react'; import { useCurrentChurch } from '../../hooks'; import { systemPropTypes } from '../../ui-kit/_lib/system'; import Styled from './Modal.styles'; @@ -33,6 +33,7 @@ const Modal = (props = {}) => { const [state, dispatch] = useModal(); const [searchParams, setSearchParams] = useSearchParams(); const dispatchBreadcrumb = useBreadcrumbDispatch(); + const ref = useRef(); useEffect(() => { // Watch for changes to the `id` search param @@ -56,12 +57,19 @@ const Modal = (props = {}) => { body.style.overflow = state.isOpen ? 'hidden' : 'auto'; }, [state.isOpen]); + // When the content changes, scroll to the top of the page + useEffect(() => { + if (state.content && ref.current) { + ref.current.scrollTo(0, 0); + } + }, [state.content]); + return ( {state.content ? ( <> - + { /> - - - - + width={{ _: '100%', sm: '10%' }} + mb={{ _: 'xs', sm: '0' }} + ml={{ _: '0', sm: 'xs' }} + display="flex" + justifyContent="flex-end" + alignItems="center" + position="absolute" + top="xs" + right="xs" + > + + + + - - - - - - - - - - - Apollos Web Embeds - - + Apollos Web Embeds + + - - - - + - - -
- - - + + + \ No newline at end of file