Consistency in Filter behaviour

app/components/satis/dropdown/component.html.slim

@@ -13,11 +13,10 @@ div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controlle
           .flex.flex-auto.flex-wrap
             / Input where you can search
             input.p-1.px-2.appearance-none.outline-none.w-full.sts-dropdown-input.text-gray-800.dark:text-gray-300 data-action="input->satis-dropdown#search" data-satis-dropdown-target="searchInput" placeholder=placeholder autofocus=options[:autofocus]
-          div
             / Reset button
-            - unless @reset_button == false
-              button.cursor-pointer.w-6.h-full.flex.items-center.text-gray-400.outline-none.focus:outline-none type="button" data-satis-dropdown-target="resetButton" data-action="click->satis-dropdown#reset focus->satis-dropdown#focus" tabindex="-1"
-                i.fas.fa-xmark
+          - reset_button_class=(options[:input_html][:value].present? ? "cursor-pointer w-6 h-full flex items-center text-gray-400 outline-none focus:outline-none" : "cursor-pointer w-6 h-full flex items-center text-gray-400 outline-none focus:outline-none hidden")
+          div class=reset_button_class type="button" data-satis-dropdown-target="resetButton" data-action="click->satis-dropdown#reset focus->satis-dropdown#focus" tabindex="-1"
+            i.fas.fa-xmark
           - unless @toggle_button == false
             .text-gray-300.w-8.py-1.pl-2.pr-1.flex.items-center.dark:border-gray-700
               / Up/down chevrons
@@ -28,7 +27,7 @@ div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controlle
     template data-satis-dropdown-target="selectedItemsTemplate"
 
     / Container for results
-    .hidden.container.sts-dropdown-results.shadow.dark:text-gray-300.z-10.rounded.max-h-select.overflow-y-auto.w-full data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll" tabindex="-1"
+    .hidden.container.sts-dropdown-results.shadow.dark:text-gray-300.z-10.rounded.max-h-select.overflow-y-auto.w-full data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll mouseover->satis-dropdown#removehighlight" tabindex="-1"
       .flex.flex-col.w-full data-satis-dropdown-target="items"
         - options[:collection]&.each do |item|
           - data_attrs = item.try(:third) ? item.third : {}

app/components/satis/dropdown/component_controller.js

@@ -202,6 +202,8 @@ export default class DropdownComponentController extends ApplicationController {
         if (this.hasResults) {
           if (!this.resultsShown)
             this.showResultsList(event)
+          this.itemsTargets[0].getElementsByClassName('highlighted')[0]?.classList.remove("highlighted")
+
           this.moveDown()
         }
         // prevent the cursor from jumping to the beginning of the input and scrolling in some cases
@@ -301,6 +303,7 @@ export default class DropdownComponentController extends ApplicationController {
     }
 
     this.hiddenSelectTarget.dispatchEvent(new Event("change"))
+    this.resetButtonTarget.classList.add("hidden")
     return false
   }
 
@@ -319,6 +322,7 @@ export default class DropdownComponentController extends ApplicationController {
 
   selectItem(dataDiv, force = false) {
     const selectedValue = dataDiv.getAttribute("data-satis-dropdown-item-value") || ""
+    dataDiv.parentElement.parentElement.parentElement.querySelector('[data-satis-dropdown-target="resetButton"]').classList.remove("hidden")
     const selectedValueText = dataDiv.getAttribute("data-satis-dropdown-item-text") || ""
     this.copyItemAttributes(dataDiv, this.hiddenSelectTarget) // FIXME: we are now supporting multiple values; is this needed? We copy the attributes to options
 
@@ -441,6 +445,9 @@ export default class DropdownComponentController extends ApplicationController {
       this.toggleButtonTarget.querySelector(".fa-chevron-up").classList.remove("hidden")
       this.toggleButtonTarget.querySelector(".fa-chevron-down").classList.add("hidden")
     }
+    if (this.searchInputTarget.value.length === 0 ){
+      this.itemsTarget.firstChild.getElementsByClassName('cursor-pointer')[0].classList.add('highlighted')
+    }
   }
 
   hideResultsList(event) {
@@ -999,4 +1006,8 @@ export default class DropdownComponentController extends ApplicationController {
 
     return item != null;
   }
+
+  removehighlight(){
+    this.itemsTargets[0].getElementsByClassName('highlighted')[0]?.classList.remove("highlighted")
+  }
 }