Make element scrollable after clicking next

centrifuge · Dec 19, 2024 · bc6ac0c · bc6ac0c
1 parent 254503b
commit bc6ac0c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx
@@ -67,7 +67,6 @@ export const PoolSetupSection = () => {
   useEffect(() => {
     form.setFieldValue('adminMultisig.signers[0]', selectedAccount?.address)
   }, [])
-  console.log(values)
   return (
     <Box>
       <Text variant="heading2" fontWeight={700}>

diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
@@ -76,6 +76,7 @@ const txMessage = {
 const IssuerCreatePoolPage = () => {
   const theme = useTheme()
   const formRef = useRef<HTMLFormElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
   const isSmall = useIsAboveBreakpoint('S')
   const address = useAddress('substrate')
   const navigate = useNavigate()
@@ -451,8 +452,14 @@ const IssuerCreatePoolPage = () => {
     }))
   }, [values, errors, step, stepFields])
 
+  useEffect(() => {
+    if (containerRef.current && step !== 3) {
+      containerRef.current.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  }, [step, containerRef])
+
   return (
-    <>
+    <div ref={containerRef} style={{ maxHeight: '100vh', overflowY: 'auto' }}>
       <PreimageHashDialog
         preimageHash={preimageHash}
         open={isPreimageDialogOpen}
@@ -540,7 +547,7 @@ const IssuerCreatePoolPage = () => {
           </Box>
         </Dialog>
       )}
-    </>
+    </div>
   )
 }