Merge pull request #272 from cBioPortal/fix/mobile

disable search bar when section hidden
cBioPortal · Nov 19, 2024 · 8a5c30b · 8a5c30b
2 parents 89269a2 + 5ab4f03
commit 8a5c30b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 28 deletions.
diff --git a/web/src/main/javascript/src/components/Header/Header.tsx b/web/src/main/javascript/src/components/Header/Header.tsx
@@ -114,7 +114,7 @@ export default function Header({
             }}
           >
             <SearchBySelect />
-            <SearchBar oncoTreeData={oncoTreeData} oncoTree={oncoTree} />
+            <SearchBar oncoTreeData={oncoTreeData} oncoTree={oncoTree} disabled={searchSectionHidden} />
             <div style={{ marginRight: 20 }} />
             <VersionSelect
               onVersionChange={onVersionChange}

diff --git a/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx b/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx
@@ -30,6 +30,7 @@ export interface ISearchBarProps {
   oncoTreeData: OncoTreeNode;
   oncoTree: OncoTree | undefined;
   mobileView?: boolean;
+  disabled?: boolean;
 }
 
 const NEXT_BUTTON_DATA_TYPE = "nextButton";
@@ -40,6 +41,7 @@ export default function SearchBar({
   oncoTreeData,
   oncoTree,
   mobileView = false,
+  disabled = false,
 }: ISearchBarProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const search = searchParams.get("search");
@@ -205,6 +207,7 @@ export default function SearchBar({
       <ReactSelect
         inputValue={input}
         value={getSearchBarValue()}
+        isDisabled={disabled}
         placeholder={
           isValidField(field)
             ? SEARCH_BY_FIELD_INFO[field].searchBarPlaceHolder
@@ -301,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()}
@@ -309,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" }}
@@ -330,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" }}