diff --git a/packages/apps/staking/src/components/modals/KVStoreModal.tsx b/packages/apps/staking/src/components/modals/KVStoreModal.tsx index d32ffa1c94..4389216f98 100644 --- a/packages/apps/staking/src/components/modals/KVStoreModal.tsx +++ b/packages/apps/staking/src/components/modals/KVStoreModal.tsx @@ -19,7 +19,7 @@ import { Tooltip, Typography, } from '@mui/material'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; // <-- Importa useRef import { useSnackbar } from '../../providers/SnackProvider'; import BaseModal from './BaseModal'; @@ -44,6 +44,7 @@ const KVStoreModal: React.FC = ({ >([]); const [loading, setLoading] = useState(false); const { showError } = useSnackbar(); + const formContainerRef = useRef(null); useEffect(() => { if (open) { @@ -54,8 +55,7 @@ const KVStoreModal: React.FC = ({ setFormData(preparedData); setPendingChanges([]); } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [open]); + }, [open, initialData]); const updatePendingChanges = (key: string, value: string) => { setPendingChanges((prev) => { @@ -125,6 +125,12 @@ const KVStoreModal: React.FC = ({ const handleAddField = () => { setFormData((prev) => [...prev, { key: '', value: '' }]); + + setTimeout(() => { + formContainerRef.current?.lastElementChild?.scrollIntoView({ + behavior: 'smooth', + }); + }, 100); }; const handleSave = async () => { @@ -169,6 +175,7 @@ const KVStoreModal: React.FC = ({ Edit KVStore