Update findSimilarFromResult function and improve dataset suggestions handling

index.html

@@ -476,15 +476,19 @@
           if (e.key === "Enter") findSimilarDatasets();
         });
 
-      // Add new function to handle finding similar datasets from results
+      // Update the findSimilarFromResult function
       function findSimilarFromResult(datasetId) {
         // Switch to the similar tab
         switchTab("similar");
 
-        // Set the dataset ID in the input
+        // Set the dataset ID in the input without triggering the focus event
         const datasetInput = document.getElementById("datasetInput");
         datasetInput.value = datasetId;
 
+        // Hide suggestions box explicitly
+        const suggestionsBox = document.getElementById("suggestionsBox");
+        suggestionsBox.classList.add("hidden");
+
         // Trigger the search
         findSimilarDatasets();
       }
@@ -526,34 +530,38 @@
 
       // Update the event listeners section
       document.addEventListener("DOMContentLoaded", () => {
-        // ... existing event listeners ...
-
         const datasetInput = document.getElementById("datasetInput");
+        let programmaticFocus = false;
 
         // Add input event listener for suggestions
         datasetInput.addEventListener("input", async (e) => {
           const suggestionsBox = document.getElementById("suggestionsBox");
           const value = e.target.value;
 
-          if (!value) {
-            // Show trending datasets when input is empty
-            const trending = await fetchTrendingDatasets();
-            displaySuggestions(trending, suggestionsBox);
-          } else {
-            // Filter trending datasets based on input
-            const trending = await fetchTrendingDatasets();
-            const filtered = trending.filter((dataset) =>
-              dataset.toLowerCase().includes(value.toLowerCase())
-            );
-            displaySuggestions(filtered, suggestionsBox);
+          if (!programmaticFocus) {
+            if (!value) {
+              // Show trending datasets when input is empty
+              const trending = await fetchTrendingDatasets();
+              displaySuggestions(trending, suggestionsBox);
+            } else {
+              // Filter trending datasets based on input
+              const trending = await fetchTrendingDatasets();
+              const filtered = trending.filter((dataset) =>
+                dataset.toLowerCase().includes(value.toLowerCase())
+              );
+              displaySuggestions(filtered, suggestionsBox);
+            }
           }
         });
 
-        // Show trending datasets on focus
+        // Show trending datasets on focus only when not programmatically focused
         datasetInput.addEventListener("focus", async () => {
-          const suggestionsBox = document.getElementById("suggestionsBox");
-          const trending = await fetchTrendingDatasets();
-          displaySuggestions(trending, suggestionsBox);
+          if (!programmaticFocus) {
+            const suggestionsBox = document.getElementById("suggestionsBox");
+            const trending = await fetchTrendingDatasets();
+            displaySuggestions(trending, suggestionsBox);
+          }
+          programmaticFocus = false;
         });
       });
     </script>