UHF-8590: Fix scroll behavior

City-of-Helsinki · Aug 16, 2023 · 93ae289 · 93ae289
1 parent 3030e33
commit 93ae289
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 8 deletions.
diff --git a/dist/js/district-and-project-search.min.js b/dist/js/district-and-project-search.min.js
diff --git a/dist/js/job-search.min.js b/dist/js/job-search.min.js
diff --git a/dist/js/news-archive.min.js b/dist/js/news-archive.min.js
diff --git a/dist/js/school-search.min.js b/dist/js/school-search.min.js
diff --git a/src/js/react/apps/school-search/containers/SearchContainer.tsx b/src/js/react/apps/school-search/containers/SearchContainer.tsx
@@ -1,9 +1,11 @@
 import { LoadingSpinner, Tab, TabList, Tabs } from 'hds-react';
 import { Suspense, useState } from 'react';
+import { useSetAtom } from 'jotai';
 import ProximityFormContainer from './ProximityFormContainer';
 import ProximityResultsContainer from './ProximityResultsContainer';
 import FeatureFormContainer from './FeatureFormContainer';
 import FeatureResultsContainer from './FeatureResultsContainer';
+import { paramsAtom } from '../store';
 
 const MODE_OPTIONS = {
   // Search by school features
@@ -14,22 +16,32 @@ const MODE_OPTIONS = {
 
 const SearchContainer = () => {
   const [searchMode, setSearchMode] = useState<string>(MODE_OPTIONS.proximity);
-
+  const setParams = useSetAtom(paramsAtom);
+
+  const changeSearchMode = (mode: string) => {
+    if (mode === searchMode) {
+      return;
+    } 
+
+    setParams({});
+    setSearchMode(mode);
+  };
+
   return (
     <>
       <Tabs>
         <TabList className='react-search__tabs'>
           <Tab
             className='react-search__tab'
             index={0}
-            onClick={() => setSearchMode(MODE_OPTIONS.proximity)}
+            onClick={() => changeSearchMode(MODE_OPTIONS.proximity)}
           >
             {Drupal.t('Search for your local school', {}, {context: 'School search: local search title'})}
           </Tab>
           <Tab
             className='react-search__tab'
             index={1}
-            onClick={() => setSearchMode(MODE_OPTIONS.feature)}
+            onClick={() => changeSearchMode(MODE_OPTIONS.feature)}
           >
             {Drupal.t('Search with school information', {}, {context: 'School search: Feature form title'})}
           </Tab>

diff --git a/src/js/react/common/hooks/useScrollToResults.ts b/src/js/react/common/hooks/useScrollToResults.ts
@@ -7,7 +7,7 @@ const useScrollToResults = (ref: RefObject<HTMLElement>, shouldScrollOnRender: b
     if (current && shouldScrollOnRender) {
       current.setAttribute('tabindex', '0');
       current.focus();
-      current.scrollIntoView({behavior: 'smooth'});
+      current.scrollIntoView({behavior: 'smooth', block: 'center'});
     }
   }, [ref, shouldScrollOnRender]);
 };