feat: reset the scroll to the top of the page when search updates

lifinance · Sep 24, 2024 · 8855a0c · 8855a0c
1 parent e9b0a00
commit 8855a0c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx b/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx
@@ -10,9 +10,11 @@ import { StickySearchInput } from '../../components/Search/SearchInput.js';
 import { SearchList } from '../../components/Search/SearchInput.style.js';
 import { SearchNotFound } from '../../components/Search/SearchNotFound.js';
 import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js';
+import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
 import { useFullPageInMaxHeightLayout } from '../../hooks/useFullPageInMaxHeightLayout.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useScrollableContainer } from '../../hooks/useScrollableContainer.js';
 import type { SelectChainPageProps } from './types.js';
 
 export const SelectChainPage: React.FC<SelectChainPageProps> = ({
@@ -22,6 +24,8 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
   const { navigateBack } = useNavigateBack();
   const { chains, setCurrentChain } = useChainSelect(formType);
   const selectToken = useTokenSelect(formType, navigateBack);
+  const elementId = useDefaultElementId();
+  const scrollableContainer = useScrollableContainer(elementId);
 
   const { t } = useTranslation();
 
@@ -56,6 +60,10 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
           : [],
       );
     }
+
+    if (scrollableContainer) {
+      scrollableContainer.scrollTop = 0;
+    }
   };
 
   const debouncedSearchInputChange = debounce(handleSearchInputChange, 250);

diff --git a/packages/widget/src/pages/SelectEnabledToolsPage.tsx b/packages/widget/src/pages/SelectEnabledToolsPage.tsx
@@ -23,8 +23,10 @@ import { StickySearchInput } from '../components/Search/SearchInput.js';
 import { SearchList } from '../components/Search/SearchInput.style.js';
 import { SearchNotFound } from '../components/Search/SearchNotFound.js';
 import { SettingsListItemButton } from '../components/SettingsListItemButton.js';
+import { useDefaultElementId } from '../hooks/useDefaultElementId.js';
 import { useFullPageInMaxHeightLayout } from '../hooks/useFullPageInMaxHeightLayout.js';
 import { useHeader } from '../hooks/useHeader.js';
+import { useScrollableContainer } from '../hooks/useScrollableContainer.js';
 import { useTools } from '../hooks/useTools.js';
 import { useSettingsStore } from '../stores/settings/useSettingsStore.js';
 
@@ -81,6 +83,8 @@ export const SelectEnabledToolsPage: React.FC<{
     );
 
   const { t } = useTranslation();
+  const elementId = useDefaultElementId();
+  const scrollableContainer = useScrollableContainer(elementId);
 
   const headerAction = useMemo(
     () => (
@@ -123,6 +127,10 @@ export const SelectEnabledToolsPage: React.FC<{
           : []) as ToolCollectionTypes,
       );
     }
+
+    if (scrollableContainer) {
+      scrollableContainer.scrollTop = 0;
+    }
   };
 
   const debouncedSearchInputChange = debounce(handleSearchInputChange, 250);