From 8855a0cb8c4a81f53682fa8a4346fa36ae0fa58e Mon Sep 17 00:00:00 2001
From: Nathan Richards <DNR500@users.noreply.github.com>
Date: Tue, 24 Sep 2024 13:25:13 +0200
Subject: [PATCH] feat: reset the scroll to the top of the page when search
 updates

---
 .../widget/src/pages/SelectChainPage/SelectChainPage.tsx  | 8 ++++++++
 packages/widget/src/pages/SelectEnabledToolsPage.tsx      | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx b/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx
index a1a9f8edd..3297c0a39 100644
--- 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
index 5b4bdeedb..27b5ce5dd 100644
--- 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);