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
sugarlabs · Oct 4, 2024 · bae54ef · bae54ef
1 parent 087cd49
commit bae54ef
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git 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
@@ -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;