From bae54efac8bf7e8e8aa21511538bf4d60f5f68ff Mon Sep 17 00:00:00 2001
From: dubeanant <147899880+dubeanant@users.noreply.github.com>
Date: Fri, 4 Oct 2024 19:51:17 +0530
Subject: [PATCH] Fix search box hover behavior replacing input text (#4027)

* Fix search box hover behavior replacing input text

* Fix hover behavior and improve scrolling for search box
---
 css/activities.css |  3 +++
 js/activity.js     | 16 ++++++++--------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/css/activities.css b/css/activities.css
index da60cd4745..df4058cb76 100644
--- a/css/activities.css
+++ b/css/activities.css
@@ -61,6 +61,7 @@
   transition: width 0.4s ease-in-out;
   font-size: 24px;
   color: black;
+  max-width: 100%;
 }
 
 #search:focus {
@@ -75,6 +76,8 @@
   position: relative;
   background-color: rgba(255, 255, 255, 1);
   max-width: 396px;
+  max-height: 200px;
+  overflow-y: auto;
   font-size: 18px;
   border: 2px solid #87cefa;
   list-style-type: none;
diff --git a/js/activity.js b/js/activity.js
index 4ee9b1d93b..682d24f670 100644
--- a/js/activity.js
+++ b/js/activity.js
@@ -2385,27 +2385,27 @@ class Activity {
                     that.doSearch();
                     if (event.keyCode === 13) this.searchWidget.style.visibility = "visible";
                 },
-                focus: (event, ui) => {
+                focus: (event) => {
                     event.preventDefault();
-                    that.searchWidget.value = ui.item.label;
                 }
             });
 
-            $j("#search").autocomplete("widget").addClass("scrollSearch");
-
             $j("#search").autocomplete("instance")._renderItem = (ul, item) => {
                 return $j("<li></li>")
                     .data("item.autocomplete", item)
                     .append(
                         '<img src="' +
                             item.artwork +
-                            '" height = "20px">' +
-                            "<a>" +
-                            " " +
+                            '" height="20px">' +
+                            "<a> " +
                             item.label +
                             "</a>"
                     )
-                    .appendTo(ul.css("z-index", 9999));
+                    .appendTo(ul.css({
+                        "z-index": 9999,
+                        "max-height": "200px",
+                        "overflow-y": "auto"
+                    }));
             };
             const searchInput = this.searchWidget.idInput_custom;
             if (!searchInput || searchInput.length <= 0) return;