adjust filter

war/src/main/js/components/dropdowns/hetero-list.js

@@ -197,20 +197,20 @@ function generateButtons() {
           };
           menuItems.push(item);
         }
-        let menu = Utils.generateDropdownItems(menuItems, true);
-        createFilter(menu);
-        instance.setContent(menu);
+        const menuContainer = document.createElement("div");
+        const menu = Utils.generateDropdownItems(menuItems, true);
+        menuContainer.appendChild(createFilter(menu));
+        menuContainer.appendChild(menu);
+        instance.setContent(menuContainer);
       });
     },
   );
 }
 
 function createFilter(menu) {
-  const filterInput = document.createElement("input");
-  filterInput.classList.add("jenkins-input");
-  filterInput.setAttribute("placeholder", "Filter");
-  filterInput.setAttribute("spellcheck", "false");
-  filterInput.setAttribute("type", "search");
+  const filterInput = createElementFromHtml(`
+    <input class="jenkins-dropdown__filter-input" placeholder="Filter" spellcheck="false" type="search"/>
+  `);
 
   filterInput.addEventListener("input", (event) =>
     applyFilterKeyword(menu, event.currentTarget),
@@ -222,9 +222,15 @@ function createFilter(menu) {
     }
   });
 
-  const filterContainer = document.createElement("div");
+  const filterContainer = createElementFromHtml(`
+    <div class="jenkins-dropdown__filter">
+      <div class="jenkins-dropdown__item__icon">
+        ${Symbols.FUNNEL}
+      </div>
+    </div>
+  `);
   filterContainer.appendChild(filterInput);
-  menu.insertBefore(filterContainer, menu.firstChild);
+  return filterContainer;
 }
 
 function applyFilterKeyword(menu, filterInput) {
@@ -234,7 +240,7 @@ function applyFilterKeyword(menu, filterInput) {
   );
   for (let item of items) {
     let match = item.innerText.toLowerCase().includes(filterKeyword);
-    item.style.display = match ? "inline-flex" : "NONE";
+    item.style.display = match ? "inline-flex" : "none";
   }
 }
 
@@ -243,7 +249,6 @@ function generateDropDown(button, callback) {
     button,
     Object.assign({}, Templates.dropdown(), {
       appendTo: undefined,
-      offset: [0, 5],
       onCreate(instance) {
         if (instance.loaded) {
           return;

war/src/main/scss/modules/dropdowns.scss

@@ -3,7 +3,6 @@
 $dropdown-padding: 0.4rem;
 
 .tippy-box[data-theme~="dropdown"] {
-  padding: $dropdown-padding;
   border-radius: 15px;
   box-shadow: var(--dropdown-box-shadow);
   outline: none !important;
@@ -39,13 +38,38 @@ $dropdown-padding: 0.4rem;
 }
 
 .jenkins-dropdown {
-  display: contents;
+  display: flex;
+  flex-direction: column;
+  padding: $dropdown-padding;
 
   &--compact {
     > .jenkins-dropdown__item,
     > .jenkins-dropdown__disabled {
       padding: 0 0.6rem;
-      min-height: 24px !important;
+      min-height: 30px !important;
+    }
+  }
+
+  &__filter {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 0.6rem 1rem;
+    border-bottom: 1px solid var(--input-border);
+
+    &-input {
+      &:focus {
+        outline: none;
+      }
+
+      width: 100%;
+      border: none;
+      color: var(--text-color-secondary);
+      background-color: unset;
+    }
+
+    svg {
+      margin-top: 2px;
     }
   }