fix next/previous nav for mobile search results

cBioPortal · Nov 19, 2024 · 5ab4f03 · 5ab4f03
1 parent bc5da0c
commit 5ab4f03
Showing 1 changed file with 29 additions and 27 deletions.
diff --git a/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx b/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx
@@ -304,6 +304,31 @@ export default function SearchBar({
       );
     }
 
+    const getPreviousResult = resultsAndIndexDefined
+    ? () => {
+        let newIndex = cancerTypeResults.length - 1;
+        if (cancerTypeResultsIndex !== 0) {
+          newIndex = cancerTypeResultsIndex - 1;
+        }
+        oncoTree?.focus(cancerTypeResults[newIndex]);
+        setCancerTypeResultsIndex(newIndex);
+      }
+    : undefined;
+
+    const getNextResult = resultsAndIndexDefined
+    ? () => {
+        let newIndex = 0;
+        if (
+          cancerTypeResultsIndex !==
+          cancerTypeResults.length - 1
+        ) {
+          newIndex = cancerTypeResultsIndex + 1;
+        }
+        oncoTree?.focus(cancerTypeResults[newIndex]);
+        setCancerTypeResultsIndex(newIndex);
+      }
+    : undefined
+
     return (
       <>
         {getResultsNumberSpan()}
@@ -312,18 +337,8 @@ export default function SearchBar({
             <div
               data-type={PREV_BUTTON_DATA_TYPE}
               className={clearIndicatorClass}
-              onClick={
-                resultsAndIndexDefined
-                  ? () => {
-                      let newIndex = cancerTypeResults.length - 1;
-                      if (cancerTypeResultsIndex !== 0) {
-                        newIndex = cancerTypeResultsIndex - 1;
-                      }
-                      oncoTree?.focus(cancerTypeResults[newIndex]);
-                      setCancerTypeResultsIndex(newIndex);
-                    }
-                  : undefined
-              }
+              onClick={mobileView ? undefined : getPreviousResult}
+              onTouchStart={mobileView ? getPreviousResult : undefined}
             >
               <FontAwesomeIcon
                 style={{ pointerEvents: "none" }}
@@ -333,21 +348,8 @@ export default function SearchBar({
             <div
               data-type={NEXT_BUTTON_DATA_TYPE}
               className={clearIndicatorClass}
-              onClick={
-                resultsAndIndexDefined
-                  ? () => {
-                      let newIndex = 0;
-                      if (
-                        cancerTypeResultsIndex !==
-                        cancerTypeResults.length - 1
-                      ) {
-                        newIndex = cancerTypeResultsIndex + 1;
-                      }
-                      oncoTree?.focus(cancerTypeResults[newIndex]);
-                      setCancerTypeResultsIndex(newIndex);
-                    }
-                  : undefined
-              }
+              onClick={mobileView ? undefined : getNextResult}
+              onTouchStart={mobileView ? getNextResult : undefined}
             >
               <FontAwesomeIcon
                 style={{ pointerEvents: "none" }}