Merge pull request #665 from reload/fix/advanced-search-scroll

Scroll advanced search results into view on click of "search" button
danskernesdigitalebibliotek · Nov 8, 2023 · 29321fd · 29321fd
2 parents 69cb4c8 + 7236712
commit 29321fd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/src/apps/advanced-search/AdvancedSearchHeader.tsx b/src/apps/advanced-search/AdvancedSearchHeader.tsx
@@ -80,25 +80,40 @@ 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] =
     useState<boolean>(true);
 
   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
@@ -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", {