From 72367129fb95df1a11ae0123b04b444b213b0144 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Wed, 8 Nov 2023 08:23:06 +0100
Subject: [PATCH] Scroll advanced search results into view on click of "search"
 button

---
 .../advanced-search/AdvancedSearchHeader.tsx  | 23 +++++++++++++++----
 .../advanced-search/AdvancedSearchResults.tsx |  6 ++++-
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/apps/advanced-search/AdvancedSearchHeader.tsx b/src/apps/advanced-search/AdvancedSearchHeader.tsx
index 1972e57667..686efb3202 100644
--- a/src/apps/advanced-search/AdvancedSearchHeader.tsx
+++ b/src/apps/advanced-search/AdvancedSearchHeader.tsx
@@ -80,18 +80,27 @@ const AdvancedSearchHeader: React.FC<AdvancedSearchHeaderProps> = ({
     setSearchObject(structuredClone(initialAdvancedSearchQuery));
   };
 
-  useEffect(() => {
-    if (searchQuery && !searchObject) {
-      setIsFormMode(false);
+  const scrollToResults = () => {
+    const element = document.getElementById("advanced-search-result");
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
     }
-  }, [searchObject, searchQuery]);
+  };
 
   const handleSearchButtonClick = () => {
     if (rawCql.trim() !== "" && !isFormMode) {
       setSearchQuery(rawCql);
+      // Half a second makes sure search result is rendered before scrolling to it.
+      setTimeout(() => {
+        scrollToResults();
+      }, 500);
       return;
     }
     setSearchObject(internalSearchObject);
+    // Half a second makes sure search result is rendered before scrolling to it.
+    setTimeout(() => {
+      scrollToResults();
+    }, 500);
   };
 
   const [isSearchButtonDisabled, setIsSearchButtonDisabled] =
@@ -99,6 +108,12 @@ const AdvancedSearchHeader: React.FC<AdvancedSearchHeaderProps> = ({
 
   const translatedCql = previewCql || searchQuery || "";
 
+  useEffect(() => {
+    if (searchQuery && !searchObject) {
+      setIsFormMode(false);
+    }
+  }, [searchObject, searchQuery]);
+
   useEffect(() => {
     setIsSearchButtonDisabled(
       shouldAdvancedSearchButtonBeDisabled(
diff --git a/src/apps/advanced-search/AdvancedSearchResults.tsx b/src/apps/advanced-search/AdvancedSearchResults.tsx
index 3872b1c737..26eee21720 100644
--- a/src/apps/advanced-search/AdvancedSearchResults.tsx
+++ b/src/apps/advanced-search/AdvancedSearchResults.tsx
@@ -103,7 +103,11 @@ const AdvancedSearchResult: React.FC<AdvancedSearchResultProps> = ({
   return (
     <>
       {!showContentOnly && <div className="advanced-search__divider" />}
-      <h2 className="text-header-h2 advanced-search__title capitalize-first">
+      <h2
+        className="text-header-h2 advanced-search__title capitalize-first"
+        /* ID is used to scroll to the results upon hitting the search button. */
+        id="advanced-search-result"
+      >
         {isLoading && t("loadingResultsText")}
         {shouldShowResultHeadline &&
           t("showingMaterialsText", {