fix multiple bugs on mobile

cBioPortal · Nov 21, 2024 · 48b9ca7 · 48b9ca7
1 parent 8a5c30b
commit 48b9ca7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 19 deletions.
diff --git a/web/src/main/javascript/src/components/Header/Header.tsx b/web/src/main/javascript/src/components/Header/Header.tsx
@@ -111,15 +111,16 @@ export default function Header({
               flexShrink: 0,
               alignItems: "center",
               visibility: searchSectionHidden ? "hidden" : "unset",
+              pointerEvents: searchSectionHidden ? 'none' : 'unset'
             }}
           >
-            <SearchBySelect />
-            <SearchBar oncoTreeData={oncoTreeData} oncoTree={oncoTree} disabled={searchSectionHidden} />
-            <div style={{ marginRight: 20 }} />
-            <VersionSelect
-              onVersionChange={onVersionChange}
-              stats={treeStats}
-            />
+              <SearchBySelect />
+              <SearchBar oncoTreeData={oncoTreeData} oncoTree={oncoTree} />
+              <div style={{ marginRight: 20 }} />
+              <VersionSelect
+                onVersionChange={onVersionChange}
+                stats={treeStats}
+              />
           </div>
         )}
         <div style={{ flexGrow: 1 }} />

diff --git a/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx b/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx
@@ -30,7 +30,6 @@ export interface ISearchBarProps {
   oncoTreeData: OncoTreeNode;
   oncoTree: OncoTree | undefined;
   mobileView?: boolean;
-  disabled?: boolean;
 }
 
 const NEXT_BUTTON_DATA_TYPE = "nextButton";
@@ -41,7 +40,6 @@ export default function SearchBar({
   oncoTreeData,
   oncoTree,
   mobileView = false,
-  disabled = false,
 }: ISearchBarProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const search = searchParams.get("search");
@@ -207,7 +205,6 @@ export default function SearchBar({
       <ReactSelect
         inputValue={input}
         value={getSearchBarValue()}
-        isDisabled={disabled}
         placeholder={
           isValidField(field)
             ? SEARCH_BY_FIELD_INFO[field].searchBarPlaceHolder
@@ -304,20 +301,25 @@ export default function SearchBar({
       );
     }
 
-    const getPreviousResult = resultsAndIndexDefined
-    ? () => {
-        let newIndex = cancerTypeResults.length - 1;
+    const getPreviousResult = useCallback(() => {
+      if (!resultsAndIndexDefined) {
+        return;
+      }
+
+      let newIndex = cancerTypeResults.length - 1;
         if (cancerTypeResultsIndex !== 0) {
           newIndex = cancerTypeResultsIndex - 1;
         }
         oncoTree?.focus(cancerTypeResults[newIndex]);
         setCancerTypeResultsIndex(newIndex);
+    }, [resultsAndIndexDefined, cancerTypeResults, cancerTypeResultsIndex]);
+
+    const getNextResult = useCallback(() => {
+      if (!resultsAndIndexDefined) {
+        return;
       }
-    : undefined;
 
-    const getNextResult = resultsAndIndexDefined
-    ? () => {
-        let newIndex = 0;
+      let newIndex = 0;
         if (
           cancerTypeResultsIndex !==
           cancerTypeResults.length - 1
@@ -326,8 +328,7 @@ export default function SearchBar({
         }
         oncoTree?.focus(cancerTypeResults[newIndex]);
         setCancerTypeResultsIndex(newIndex);
-      }
-    : undefined
+    }, [resultsAndIndexDefined, cancerTypeResults, cancerTypeResultsIndex]);
 
     return (
       <>