diff --git a/app/components/satis/dropdown/component.html.slim b/app/components/satis/dropdown/component.html.slim index 1160c57f..d8aa8d79 100644 --- a/app/components/satis/dropdown/component.html.slim +++ b/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 : {} diff --git a/app/components/satis/dropdown/component_controller.js b/app/components/satis/dropdown/component_controller.js index 5c243011..52e6d768 100644 --- a/app/components/satis/dropdown/component_controller.js +++ b/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") + } }