satis 1.0.75 → 2.0.7

data/app/components/satis/dropdown/component_controller.js

@@ -1,11 +1,24 @@
-import ApplicationController from "../../../../frontend/controllers/application_controller"
+import ApplicationController from "satis/controllers/application_controller"
 
-// FIXME: Is this full path really needed?
-import { debounce, popperSameWidth } from "../../../../frontend/utils"
+import { debounce, popperSameWidth } from "satis/utils"
 import { createPopper } from "@popperjs/core"
 
-export default class extends ApplicationController {
-  static targets = ["results", "items", "item", "searchInput", "resetButton", "toggleButton", "hiddenInput"]
+export default class DropdownComponentController extends ApplicationController {
+
+  static targets = [
+    "results",
+    "items",
+    "item",
+    "searchInput",
+    "resetButton",
+    "toggleButton",
+    "hiddenSelect",
+    "pills",
+    "pillTemplate",
+    "pill",
+    "selectedItemsTemplate"
+  ]
+
   static values = {
     chainTo: String,
     freeText: Boolean,
@@ -13,19 +26,19 @@ export default class extends ApplicationController {
     pageSize: Number,
     url: String,
     urlParams: Object,
+    isMultiple: Boolean
   }
 
   connect() {
     super.connect()
-
     this.debouncedFetchResults = debounce(this.fetchResults.bind(this), 250)
     this.debouncedLocalResults = debounce(this.localResults.bind(this), 250)
     this.selectedIndex = -1
 
     this.boundClickedOutside = this.clickedOutside.bind(this)
     this.boundResetSearchInput = this.resetSearchInput.bind(this)
-    this.boundHandleHiddenInputChange = this.handleHiddenInputChange.bind(this)
-    this.boundBlur = this.handleBlur.bind(this)
+    this.boundBlur = this.blur.bind(this)
+    this.boundChainToChanged = this.chainToChanged.bind(this)
 
     // To remember what the current page and last page were, we queried
     this.currentPage = 1
@@ -33,42 +46,102 @@ export default class extends ApplicationController {
     this.endPage = null
 
     // To remember what the last search was we did
+    this.searchQueryValue = null
     this.lastSearch = null
+    this.minSearchQueryLength = 2
 
-    this.display()
+    // To remember what the last options were we got from the server to prevent unnecessary refreshes
+    // and unexpected events
+    this.lastServerRefreshOptions = new Set()
 
     this.popperInstance = createPopper(this.element, this.resultsTarget, {
-      offset: [-20, 2],
       placement: "bottom-start",
+      strategy: "fixed",
       modifiers: [
+        { name: "offset", options: { offset: [0, 1] } },
         {
           name: "flip",
-          enabled: true,
           options: {
-            boundary: this.element.closest(".satis-card"),
+            fallbackPlacements: ["bottom"],
+            boundary: this.element.closest(".sts-card"),
           },
         },
         {
           name: "preventOverflow",
-          enabled: true,
+          options: {
+            boundary: this.element.closest(".sts-card"),
+          },
         },
         popperSameWidth,
       ],
     })
+    this.popperInstance.state.elements.popper.popperInstance = () => this.popperInstance
 
+    if (this.hasToggleButtonTarget) this.toggleButtonTarget.addEventListener("blur", this.boundBlur)
     this.searchInputTarget.addEventListener("blur", this.boundBlur)
-    this.toggleButtonTarget.addEventListener("blur", this.boundBlur)
     this.resultsTarget.addEventListener("blur", this.boundBlur)
 
     window.addEventListener("click", this.boundClickedOutside)
 
-    this.hiddenInputTarget.addEventListener("change", this.boundHandleHiddenInputChange)
+    setTimeout(() => {
+      this.getScrollParent(this.element)?.addEventListener("scroll", this.boundBlur)
+    }, 500)
+
+    if (this.chainToValue) {
+      this.getChainToElement()?.addEventListener("change", this.boundChainToChanged)
+    }
+
+    if (this.hiddenSelectTarget.selectedOptions.length > 0 && this.hiddenSelectTarget.selectedOptions[0].value) {
+      this.refreshSelectionFromServer().then((changed) => {
+        this.filterResultsChainTo()
+        this.setHiddenSelect()
+
+        if (!this.hiddenSelectTarget.getAttribute("data-reflex")) {
+          let event = new Event("change")
+          event.detail = { src: "satis-dropdown" }
+          this.hiddenSelectTarget.dispatchEvent(event)
+        }
+      })
+    }
+  }
+
+  getScrollParent(node) {
+    if (node == null) {
+      return null
+    }
+
+    let isScrollable = false
+
+    if (node instanceof Element) {
+      const vScrollValue = window.getComputedStyle(node).getPropertyValue("overflow-y")
+
+      isScrollable = vScrollValue == "auto" || vScrollValue == "scroll"
+    }
+
+    if (isScrollable) {
+      return node
+    } else {
+      return node.parentNode == null ? node : this.getScrollParent(node.parentNode)
+    }
+  }
+
+  chainToChanged(event) {
+    // Ignore if we triggered this change event
+    if (event?.detail?.src == "satis-dropdown") {
+      return
+    }
+
+    this.reset(event)
   }
 
   disconnect() {
     this.debouncedFetchResults = null
     this.debouncedLocalResults = null
     window.removeEventListener("click", this.boundClickedOutside)
+    this.getChainToElement()?.removeEventListener("change", this.boundChainToChanged)
+    if (this.hasToggleButtonTarget) this.toggleButtonTarget.removeEventListener("blur", this.boundBlur)
+    this.resultsTarget.removeEventListener("blur", this.boundBlur)
+    this.searchInputTarget.removeEventListener("blur", this.boundBlur)
   }
 
   focus(event) {
@@ -76,27 +149,15 @@ export default class extends ApplicationController {
   }
 
   blur(event) {
-    this.handleBlur(event)
-  }
-
-  handleBlur(event) {
-    if (!this.element.contains(event.relatedTarget) && this.resultsShown) {
-      this.hideResultsList()
-      if (event.target == this.searchInputTarget) {
-        this.boundResetSearchInput(event)
-      }
+    let target = event.relatedTarget
+    if (target == null) {
+      target = document.target
     }
-  }
 
-  handleHiddenInputChange(event) {
-    if (event?.detail?.src == "satis-dropdown") {
-      return
-    }
-
-    if (this.hiddenInputTarget.value == "") {
-      this.searchInputTarget.value = null
-    } else {
-      this.resetSearchInput()
+    if (event.type != "scroll" && !this.element.contains(target)) {
+      if (this.resultsShown)
+        this.hideResultsList()
+      this.boundResetSearchInput(event)
     }
   }
 
@@ -108,25 +169,19 @@ export default class extends ApplicationController {
       return
     }
 
-    // Put current selection in search field
-    if (this.hiddenInputTarget.value) {
-      if (this.itemTargets.length == 0) {
-        let ourUrl = this.normalizedUrl
-        ourUrl.searchParams.append("id", this.hiddenInputTarget.value)
-        ourUrl.searchParams.append("page", this.currentPage)
-        ourUrl.searchParams.append("page_size", this.pageSizeValue)
+    this.refreshSelectionFromServer().then(() => {
+      // resolved
+      this.setHiddenSelect()
 
-        this.fetchResultsWith(ourUrl).then(() => {
-          this.setHiddenInput()
-        })
-      } else {
-        this.setHiddenInput()
+      if (!this.searchInputTarget.value && this.freeTextValue && this.hiddenSelectTarget.options.length > 0) {
+        this.searchInputTarget.value = this.hiddenSelectTarget.options[0].value
       }
 
-      if (!this.searchInputTarget.value && this.freeTextValue) {
-        this.searchInputTarget.value = this.hiddenInputTarget.value
-      }
-    }
+      if (!this.hiddenSelectTarget.getAttribute("data-reflex"))
+        this.hiddenSelectTarget.dispatchEvent(new CustomEvent("change", { detail: { src: "satis-dropdown" } }))
+
+      this.validateSearchQuery()
+    })
   }
 
   // Called when scrolling in the resultsTarget
@@ -142,24 +197,29 @@ export default class extends ApplicationController {
       return
     }
 
-    this.filterResultsChainTo()
-
     switch (event.key) {
       case "ArrowDown":
         if (this.hasResults) {
-          this.showResultsList(event)
-
+          if (!this.resultsShown)
+            this.showResultsList(event)
           this.moveDown()
         }
+        // prevent the cursor from jumping to the beginning of the input and scrolling in some cases
+        event.preventDefault()
         break
       case "ArrowUp":
         if (this.hasResults) {
           this.moveUp()
         }
+        // prevent the cursor from jumping to the beginning of the input and scrolling in some cases
+        event.preventDefault()
         break
       case "Enter":
         event.preventDefault()
         this.select(event)
+        // expect the dropdown to hide when its a freetext value
+        if (this.selectedIndex === -1 && this.freeTextValue)
+          this.hideResultsList(event)
 
         break
       case "Escape":
@@ -179,48 +239,68 @@ export default class extends ApplicationController {
 
   // User enters text in the search field
   search(event) {
+    this.searchQueryValue = this.searchInputTarget.value
+
+    if(this.searchInputTarget.value.length === 0 && !this.isMultipleValue){
+      if(this.nrOfItems === 1) this.lowLightSelected();
+      this.hiddenSelectTarget.innerHTML = ""
+      this.hiddenSelectTarget.add(this.createOption())
+    }
+
     if (this.hasUrlValue) {
       this.debouncedFetchResults(event)
     } else {
       this.debouncedLocalResults(event)
     }
 
-    if (this.searchInputTarget.value) {
-      this.searchInputTarget.closest(".bg-white").classList.add("warning")
-    } else {
-      this.searchInputTarget.closest(".bg-white").classList.remove("warning")
+    if (!this.isMultipleValue) {
+      // set the freetext value as the selected value
+      if (this.freeTextValue && this.searchInputTarget.value) {
+        this.hiddenSelectTarget.innerHTML = ""
+        var option = this.createOption({ text: this.searchInputTarget.value, value: this.searchInputTarget.value })
+        this.hiddenSelectTarget.add(option)
+      }
     }
   }
 
   // User presses reset button
   reset(event) {
-    this.hiddenInputTarget.value = null
-    this.hiddenInputTarget.dispatchEvent(new Event("change"))
-    this.searchInputTarget.value = null
+    if (!this.isMultipleValue) {
+      this.hiddenSelectTarget.innerHTML = ""
+      this.lastServerRefreshOptions.clear()
+      this.selectedItemsTemplateTarget.innerHTML = ""
+      this.hiddenSelectTarget.options.add(this.createOption())
+    }
+
+    this.searchInputTarget.value = ""
+    this.searchQueryValue = null
+    this.currentPage = 1
     this.lastSearch = null
     this.lastPage = null
     this.endPage = null
 
-    if (this.selectedItem) {
-      this.selectedItem.classList.remove("bg-primary-200")
-    }
+    this.lowLightSelected();
     this.selectedIndex = -1
+
     if (this.hasUrlValue) {
       this.itemsTarget.innerHTML = ""
     }
-    this.hideResultsList()
+
     this.itemTargets.forEach((item) => {
       item.classList.remove("hidden")
     })
+    this.filterResultsChainTo()
+
+    // hide all results and reset
+    this.hideResultsList()
+
+    this.validateSearchQuery()
 
     if (event) {
       event.preventDefault()
     }
 
-    if (this.searchInputTarget.closest(".bg-white").classList.contains("warning")) {
-      this.searchInputTarget.closest(".bg-white").classList.remove("warning")
-    }
-
+    this.hiddenSelectTarget.dispatchEvent(new Event("change"))
     return false
   }
 
@@ -230,59 +310,106 @@ export default class extends ApplicationController {
     if (dataDiv == null) {
       dataDiv = this.selectedItem
     }
+    if (dataDiv == null) return
 
-    if (dataDiv == null) {
-      return
-    }
-
-    this.selectItem(dataDiv)
+    this.selectItem(dataDiv, true)
 
     event.preventDefault()
   }
 
-  selectItem(dataDiv) {
-    this.hideResultsList()
+  selectItem(dataDiv, force = false) {
+    const selectedValue = dataDiv.getAttribute("data-satis-dropdown-item-value") || ""
+    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
 
-    // Copy over data attributes on the item div to the hidden input
-    Array.prototype.slice.call(dataDiv.attributes).forEach((attr) => {
-      if (attr.name.startsWith("data") && !attr.name.startsWith("data-satis") && !attr.name.startsWith("data-action")) {
-        this.hiddenInputTarget.setAttribute(attr.name, attr.value)
+    const option = this.createOption({ text: selectedValueText, value: selectedValue })
+    this.copyItemAttributes(dataDiv, option)
+    const optionExists = Array.from(this.hiddenSelectTarget.options).some(
+      (opt) => opt.value === option.value && this.dataAttributesAreEqual(opt, option)
+    )
+
+    // we dont select items that already have been selected, open list
+    if (!force) {
+      if (optionExists) {
+        if (!this.resultsShown) this.showResultsList()
+        return
       }
-    })
+    }
 
-    this.searchInputTarget.value = dataDiv.getAttribute("data-satis-dropdown-item-text")
-    this.hiddenInputTarget.value = dataDiv.getAttribute("data-satis-dropdown-item-value")
-    this.lastSearch = this.searchInputTarget.value
+    // clear the search input if we are not in multi select mode
+    if (!this.isMultipleValue) {
+      this.lastServerRefreshOptions.clear()
+      this.hiddenSelectTarget.innerHTML = ""
+      this.selectedItemsTemplateTarget.innerHTML = ""
+      this.searchInputTarget.value = selectedValueText
+    } else
+      this.selectedItemsTemplateTarget.content.querySelector(`[data-satis-dropdown-item-value="${selectedValue}"]`)?.remove()
 
-    this.hiddenInputTarget.dispatchEvent(new Event("change"))
+    this.hiddenSelectTarget.add(option)
+    this.lastServerRefreshOptions.add(selectedValue)
+    this.selectedItemsTemplateTarget.content.appendChild(dataDiv.cloneNode(true))
 
-    if (this.searchInputTarget.closest(".bg-white").classList.contains("warning")) {
-      this.searchInputTarget.closest(".bg-white").classList.remove("warning")
+    this.hiddenSelectTarget.dispatchEvent(new Event("change"))
+    this.setSelectedItem(selectedValue)
+    this.hideResultsList()
+    this.validateSearchQuery()
+  }
+
+  setHiddenSelect() {
+    if (this.hiddenSelectTarget.options.length === 0) {
+      this.searchInputTarget.value = ""
+      this.pillsTarget.innerHTML = ""
+      this.pillsTarget.classList.add("hidden")
+      return true
+    }
+
+    if (this.isMultipleValue) {
+      Array.from(this.hiddenSelectTarget.options).forEach((opt) => {
+        if (!opt.value) return
+        const pillExists = this.pillsTarget.querySelector(
+          `[data-satis-dropdown-target="pill"] > button[data-satis-dropdown-id-param="${opt.value}"]`
+        )
+        if (!pillExists) {
+          // Add pill to selection
+          const pillTemplate = this.pillTemplateTarget.content.firstElementChild.cloneNode(true)
+          pillTemplate.prepend(opt.text || opt.value)
+          pillTemplate.querySelector("button").setAttribute("data-satis-dropdown-id-param", opt.value)
+          this.pillsTarget.appendChild(pillTemplate)
+        }
+      })
+
+      this.searchInputTarget.value = ""
+      this.pillsTarget.classList.remove("hidden")
+    } else if (this.hiddenSelectTarget.options.length == 1) {
+      const opt = this.hiddenSelectTarget.options[0]
+      this.searchInputTarget.value = opt.text
     }
   }
 
   // --- Helpers
 
-  setHiddenInput() {
-    const currentItem = this.itemTargets.find((item) => {
-      return this.hiddenInputTarget.value == item.getAttribute("data-satis-dropdown-item-value")
-    })
-    if (currentItem) {
-      this.searchInputTarget.value = currentItem.getAttribute("data-satis-dropdown-item-text")
-
-      Array.prototype.slice.call(currentItem.attributes).forEach((attr) => {
-        if (
-          attr.name.startsWith("data") &&
-          !attr.name.startsWith("data-satis") &&
-          !attr.name.startsWith("data-action")
-        ) {
-          this.hiddenInputTarget.setAttribute(attr.name, attr.value)
-        }
-      })
-      if (!this.hiddenInputTarget.getAttribute("data-reflex")) {
-        this.hiddenInputTarget.dispatchEvent(new CustomEvent("change", { detail: { src: "satis-dropdown" } }))
-      }
-    }
+  recordLastSearch() {
+    this.lastSearch = this.searchInputTarget.value ? this.searchInputTarget.value : ""
+  }
+
+  get searchQueryChanged() {
+    const searchQueryValue = this.filteredSearchQuery ? this.filteredSearchQuery : ""
+    const lastSearch = this.lastSearch ? this.lastSearch : ""
+    return searchQueryValue.length !== lastSearch.length ||
+      searchQueryValue.localeCompare(lastSearch, undefined, { sensitivity: "base" }) !== 0
+  }
+
+  removePill(event) {
+    event.preventDefault()
+
+    this.hiddenSelectTarget.removeChild(this.hiddenSelectTarget.querySelector(`option[value="${event.params.id}"]`))
+    this.lastServerRefreshOptions.delete(event.params.id)
+
+    this.pillTargets
+      .find((pill) => pill.querySelector("button").getAttribute("data-satis-dropdown-id-param") == event.params.id)
+      ?.remove()
+
+    //this.hiddenSelectTarget.dispatchEvent(new Event("change"))
   }
 
   toggleResultsList(event) {
@@ -293,14 +420,16 @@ export default class extends ApplicationController {
       // } else if (this.element.contains(document.activeElement)) {
     } else {
       this.filterResultsChainTo()
-      if (this.hasResults) {
+
+      if(this.hasResults && !this.searchQueryChanged){
         this.showResultsList(event)
-      } else {
-        this.fetchResults(event)
+      }else {
+        if (this.hasUrlValue)
+          this.fetchResults(event)
+        else
+          this.localResults(event)
       }
     }
-
-    event.preventDefault()
     return false
   }
 
@@ -308,15 +437,23 @@ export default class extends ApplicationController {
     this.resultsTarget.classList.remove("hidden")
     this.resultsTarget.setAttribute("data-show", "")
     this.popperInstance.update()
-    this.toggleButtonTarget.querySelector(".fa-chevron-up").classList.remove("hidden")
-    this.toggleButtonTarget.querySelector(".fa-chevron-down").classList.add("hidden")
+    if (this.hasToggleButtonTarget) {
+      this.toggleButtonTarget.querySelector(".fa-chevron-up").classList.remove("hidden")
+      this.toggleButtonTarget.querySelector(".fa-chevron-down").classList.add("hidden")
+    }
   }
 
   hideResultsList(event) {
     this.resultsTarget.classList.add("hidden")
     this.resultsTarget.removeAttribute("data-show")
-    this.toggleButtonTarget.querySelector(".fa-chevron-up").classList.add("hidden")
-    this.toggleButtonTarget.querySelector(".fa-chevron-down").classList.remove("hidden")
+    if (this.hasToggleButtonTarget) {
+      this.toggleButtonTarget.querySelector(".fa-chevron-up").classList.add("hidden")
+      this.toggleButtonTarget.querySelector(".fa-chevron-down").classList.remove("hidden")
+    }
+  }
+
+  getChainToElement() {
+    return this.hiddenSelectTarget?.form?.querySelector(`[name="${this.chainToValue}"]`)
   }
 
   filterResultsChainTo() {
@@ -325,11 +462,12 @@ export default class extends ApplicationController {
     }
 
     let chainToValue
-    let chainTo = this.hiddenInputTarget.form.querySelector(`[name="${this.chainToValue}"]`)
+    let chainTo = this.getChainToElement()
     if (chainTo) {
       chainToValue = chainTo.value
     }
 
+    let listItems = 0
     this.itemTargets.forEach((item) => {
       let itemChainToValue = item.getAttribute("data-chain")
       let chainMatch = true
@@ -338,84 +476,125 @@ export default class extends ApplicationController {
       }
 
       if (chainMatch) {
+        listItems += 1
         item.classList.remove("hidden")
       } else {
         item.classList.add("hidden")
+        item.classList.remove("highlighted")
       }
     })
+    if (listItems == 1) {
+      this.selectItem(this.itemTargets.filter((item) => {
+        return item.classList != 'hidden'
+      })[0])
+    }
   }
 
   localResults(event) {
-    if (this.searchInputTarget.value == this.lastSearch) {
-      return
-    }
-
-    if (this.searchInputTarget.value.length < 2) {
+    if (!this.searchQueryChanged) {
+      if(!this.resultsShown) {
+        if (this.hasResults)
+          this.showResultsList(event)
+        else this.showSelectedItem()
+      }
+      this.validateSearchQuery()
       return
     }
 
-    this.lastSearch = this.searchInputTarget.value
+    this.recordLastSearch()
 
+    // show all items again and count those that were already visible (previously matched)
+    let previouslyVisibleItemsCount = 0
     this.itemTargets.forEach((item) => {
-      item.classList.remove("hidden")
-    })
+      if (item.classList.contains('hidden')) {
+        item.classList.remove('hidden')
+      } else {
+        previouslyVisibleItemsCount++
+      }
+    });
 
     this.filterResultsChainTo()
 
+    // hide all items that don't match the search query
+    const searchValue = this.searchQueryValue
     let matches = []
     this.itemTargets.forEach((item) => {
-      let text = item.getAttribute("data-satis-dropdown-item-text").toLowerCase()
-      let value = item.getAttribute("data-satis-dropdown-item-value").toLowerCase()
-
-      if (!item.classList.contains("hidden")) {
-        if (this.needsExactMatchValue && text === this.searchInputTarget.value.toLowerCase()) {
-          matches = matches.concat(item)
-        } else if (!this.needsExactMatchValue && text.indexOf(this.searchInputTarget.value.toLowerCase()) >= 0) {
-          matches = matches.concat(item)
+      const text = item.getAttribute("data-satis-dropdown-item-text")
+      const matched = this.needsExactMatchValue ?
+        searchValue.localeCompare(text, undefined, {sensitivity: 'base'}) === 0:
+        new RegExp(searchValue, "i").test(text)
+
+      const isHidden = item.classList.contains("hidden")
+      if (!isHidden) {
+        if (matched) {
+          matches.push(item)
         } else {
-          item.classList.add("hidden")
+          item.classList.toggle("hidden", true)
         }
       }
     })
 
-    if (this.freeTextValue && matches.length != 1) {
-      this.hiddenInputTarget.value = this.lastSearch
-    }
-
-    if (
-      matches.length == 1 &&
-      matches[0].getAttribute("data-satis-dropdown-item-text").toLowerCase().indexOf(this.lastSearch.toLowerCase()) >= 0
-    ) {
-      this.selectItem(matches[0].closest('[data-satis-dropdown-target="item"]'))
-    } else if (matches.length > 1) {
+    // don't show results
+    if (matches.length > 0) {
       this.showResultsList(event)
+    } else {
+      if (!this.showSelectedItem())
+        this.hideResultsList(event)
+    }
+
+    // auto select if there is only one match and we are not in freetext mode
+    if(!this.freeTextValue) {
+      if (matches.length === 1) {
+        if (this.filteredSearchQuery.length >= this.minSearchQueryLength &&
+          matches[0].getAttribute("data-satis-dropdown-item-text").toLowerCase().indexOf(this.lastSearch.toLowerCase()) >= 0) {
+          const dataDiv = matches[0].closest('[data-satis-dropdown-target="item"]')
+          this.selectItem(dataDiv)
+          this.setSelectedItem(dataDiv.getAttribute("data-satis-dropdown-item-value"))
+          this.searchQueryValue = ""
+        } else {
+          this.showSelectedItem()
+        }
+        // the selected item if there was only 1 item visible before
+      } else if(previouslyVisibleItemsCount === 1 && matches.length > 1) {
+        this.setSelectedItem()
+      }
     }
+
+    this.validateSearchQuery()
   }
 
   // Remote search
   fetchResults(event) {
     const promise = new Promise((resolve, reject) => {
       if (
-        (this.searchInputTarget.value == this.lastSearch &&
+        (!this.searchQueryChanged &&
           (this.currentPage == this.lastPage || this.currentPage == this.endPage)) ||
         !this.hasUrlValue
       ) {
+        if(!this.resultsShown) {
+          if (this.hasResults)
+            this.showResultsList(event)
+          else this.showSelectedItem()
+        }
         return
       }
 
-      if (this.searchInputTarget.value != this.lastSearch) {
+      if (this.searchQueryChanged) {
         this.currentPage = 1
         this.endPage = null
+        this.recordLastSearch()
       }
 
-      this.lastSearch = this.searchInputTarget.value
       this.lastPage = this.currentPage
 
-      let ourUrl = this.normalizedUrl
+      let ourUrl = this.normalizedUrl()
       let pageSize = this.pageSizeValue
-      if (this.searchInputTarget.value.length >= 2) {
-        ourUrl.searchParams.append("term", this.searchInputTarget.value)
+
+      if (event != null && (this.filteredSearchQuery >= 2 || this.lastSearch)) {
+        ourUrl.searchParams.append("term", this.searchQueryValue)
       }
+
+
       ourUrl.searchParams.append("page", this.currentPage)
       ourUrl.searchParams.append("page_size", pageSize)
       if (this.needsExactMatchValue) {
@@ -425,30 +604,34 @@ export default class extends ApplicationController {
       this.fetchResultsWith(ourUrl).then((itemCount) => {
         if (this.hasResults) {
           this.filterResultsChainTo()
-          this.highLightSelected()
-          this.showResultsList()
-
-          if (
-            this.nrOfItems == 1 &&
-            this.itemTargets[0]
-              .getAttribute("data-satis-dropdown-item-text")
-              .toLowerCase()
-              .indexOf(this.searchInputTarget.value.toLowerCase()) >= 0
-          ) {
-            this.selectItem(this.itemTargets[0].closest('[data-satis-dropdown-target="item"]'))
-          } else if (this.nrOfItems == 1) {
-            this.moveDown()
+
+          if (!this.resultsShown && !this.chainToValue) {
+            this.showResultsList()
+          }
+
+          // auto select when there is only 1 value
+          if (this.filteredSearchQuery.length >= this.minSearchQueryLength && this.nrOfItems === 1 && !this.freeTextValue) {
+            const dataDiv = this.itemTargets[0].closest('[data-satis-dropdown-target="item"]')
+            this.selectItem(dataDiv)
+            this.setSelectedItem(dataDiv.getAttribute("data-satis-dropdown-item-value"))
+            this.searchQueryValue = ""
           }
 
           if (itemCount > 0) {
             this.currentPage += 1
           }
-          if (itemCount < pageSize) {
+
+          // when the count < page_size we assume we reached the end of the list (count can be 0)
+          if (itemCount != pageSize) {
             this.endPage = this.currentPage
           }
 
           resolve()
+        } else {
+          this.showSelectedItem()
         }
+
+        this.validateSearchQuery()
       })
     })
     return promise
@@ -482,7 +665,95 @@ export default class extends ApplicationController {
     return promise
   }
 
-  get normalizedUrl() {
+  get filteredSearchQuery(){
+    if(this.searchQueryValue < this.minSearchQueryLength) return ""
+    return this.searchQueryValue
+  }
+
+  get selectionChangedSinceLastRefresh() {
+    return (
+      this.hiddenSelectTarget.options.length !== this.lastServerRefreshOptions.size ||
+      !Array.from(this.hiddenSelectTarget.options).every((option) => this.lastServerRefreshOptions.has(option.value))
+    )
+  }
+
+  refreshSelectionFromServer() {
+    if (!this.selectionChangedSinceLastRefresh) return Promise.resolve()
+
+    let updated = 0
+    Array.from(this.hiddenSelectTarget.options).forEach((opt) => {
+      // try to find the items locally
+      let item = this.itemsTarget.querySelector('[data-satis-dropdown-item-value="' + opt.value + '"]')
+      if (item) {
+        opt.text = item.getAttribute("data-satis-dropdown-item-text")
+
+        // Copy over data attributes on the item div to the option
+        this.copyItemAttributes(item, opt)
+        this.selectedItemsTemplateTarget.content.appendChild(item.cloneNode(true))
+        updated++
+      }
+
+      this.lastServerRefreshOptions.add(opt.value)
+    })
+
+    if (!this.hasUrlValue || this.hiddenSelectTarget.options.length === updated) return Promise.resolve()
+
+    const promise = new Promise((resolve, reject) => {
+      if (!this.hasUrlValue) return
+
+      const ourUrl = this.normalizedUrl()
+
+      let selectedIds = Array.from(this.hiddenSelectTarget.options).map((opt) => opt.value)
+
+      // make sure we get all selected items
+      //ourUrl.searchParams.append("page", 1)
+      //ourUrl.searchParams.append("page_size", selectedIds.length)
+      // parameters with [] will be converted to an array
+      if (selectedIds.length > 0)
+        selectedIds.forEach((id) => ourUrl.searchParams.append(selectedIds.length === 1 ? "id" : "id[]", id))
+
+      fetch(ourUrl.href, {}).then((response) => {
+        if (response.ok)
+          response.text().then((data) => {
+            let tmpDiv = document.createElement("div")
+            tmpDiv.innerHTML = data
+
+            for (let i = 0; i < this.hiddenSelectTarget.options.length; i++) {
+              let opt = this.hiddenSelectTarget.options[i]
+              let item = tmpDiv.querySelector('[data-satis-dropdown-item-value="' + opt.value + '"]')
+              if (!item && !this.freeTextValue) {
+                this.selectedItemsTemplateTarget.content.querySelector(`[data-satis-dropdown-item-value="${opt.value}"]`)?.remove()
+                opt.remove()
+                this.lastServerRefreshOptions.delete(opt.value)
+              } else {
+                let text = item.getAttribute("data-satis-dropdown-item-text")
+
+                if (opt.text != text) {
+                  if (text === "") opt.text = opt.id
+                  else opt.text = text
+                }
+
+                // Copy over data attributes on the item div to the option
+                this.copyItemAttributes(item, opt)
+                this.selectedItemsTemplateTarget.content.appendChild(item.cloneNode(true))
+              }
+            }
+
+            // blank option
+            if (this.hiddenSelectTarget.options.length === 0) {
+              let option = this.createOption()
+              this.hiddenSelectTarget.options.add(option)
+              this.lastServerRefreshOptions.add(option.value)
+            }
+
+            resolve()
+          })
+      })
+    })
+    return promise
+  }
+
+  normalizedUrl() {
     let ourUrl
     try {
       ourUrl = new URL(this.urlValue)
@@ -494,6 +765,7 @@ export default class extends ApplicationController {
     const form = this.element.closest("form")
     Object.entries(this.urlParamsValue).forEach((item) => {
       let elm = form.querySelector(`[name='${item[1]}']`)
+
       if (elm) {
         ourUrl.searchParams.append(item[0], elm.value)
       } else {
@@ -501,6 +773,14 @@ export default class extends ApplicationController {
       }
     })
 
+    let chainTo = this.getChainToElement()
+    if (chainTo) {
+      let chainToParam = chainTo
+        .getAttribute("name")
+        .substring(chainTo.getAttribute("name").lastIndexOf("[") + 1, chainTo.getAttribute("name").lastIndexOf("]"))
+      ourUrl.searchParams.append(chainToParam, chainTo.value)
+    }
+
     return ourUrl
   }
 
@@ -533,24 +813,42 @@ export default class extends ApplicationController {
   }
 
   get selectedItem() {
+    if (this.selectedIndex === -1) return
     return this.itemTargets.filter((item) => {
       return !item.classList.contains("hidden")
     })[this.selectedIndex]
   }
 
   lowLightSelected() {
-    if (this.selectedItem) {
-      this.selectedItem.classList.remove("bg-primary-200")
-    }
+    this.itemsTarget.querySelectorAll('.highlighted[data-satis-dropdown-target="item"]').forEach((item) => {
+      item.classList.toggle("highlighted")
+    })
   }
 
   highLightSelected() {
-    if (this.selectedItem) {
-      this.selectedItem.classList.add("bg-primary-200")
-      this.selectedItem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" })
+    const selectedItem = this.selectedItem
+    if (selectedItem) {
+      selectedItem.classList.toggle("highlighted", true)
+      selectedItem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" })
     }
   }
 
+  /*
+    * Set the selected item base on an the items 'data-satis-dropdown-item-value' attribute
+    * @param {string} value - The value to match the item against
+   */
+  setSelectedItem(value) {
+    this.lowLightSelected()
+    if (!value) {
+      this.selectedIndex = -1
+      return
+    }
+    const itemTargets = this.itemTargets;
+    const visibleItems = itemTargets.filter(item => !item.classList.contains("hidden"));
+    this.selectedIndex = visibleItems.findIndex(item => item.getAttribute("data-satis-dropdown-item-value") === value);
+    this.highLightSelected()
+  }
+
   moveDown() {
     this.lowLightSelected()
     this.increaseSelectedIndex()
@@ -562,9 +860,33 @@ export default class extends ApplicationController {
     this.decreaseSelectedIndex()
     this.highLightSelected()
   }
+  validateSearchQuery() {
+    const trimmedValue = this.searchInputTarget.value.trim();
+    const elements = this.selectedItemsTemplateTarget.content.querySelectorAll(`[data-satis-dropdown-item-text*="${trimmedValue}"]`);
+    const selected = Array.from(elements).find(element => element.getAttribute('data-satis-dropdown-item-text').trim() === trimmedValue);
+    if (!selected && this.searchInputTarget.value.length > 0 && !this.freeTextValue) {
+      this.searchInputTarget.closest(".bg-white").classList.toggle("warning", true)
+    } else {
+      this.searchInputTarget.closest(".bg-white").classList.toggle("warning", false)
+    }
+  }
 
+  // clear search input and hide results
   resetSearchInput(event) {
-    this.setHiddenInput()
+    if (this.multiSelectValue) {
+      this.searchInputTarget.value = ""
+    } else {
+      if (this.hiddenSelectTarget.options.length > 0) {
+        const option = this.hiddenSelectTarget.options[0]
+        this.searchInputTarget.value = option.text
+      }
+    }
+
+    if (this.resultsShown) {
+      this.hideResultsList(event)
+    }
+
+    this.validateSearchQuery()
   }
 
   clickedOutside(event) {
@@ -577,4 +899,78 @@ export default class extends ApplicationController {
       }
     }
   }
+
+  copyItemAttributes(item, dest) {
+    Array.prototype.slice.call(item.attributes).forEach((attr) => {
+      if (attr.name.startsWith("data") && !attr.name.startsWith("data-satis") && !attr.name.startsWith("data-action")) {
+        dest.setAttribute(attr.name, attr.value)
+      }
+    })
+  }
+
+  createOption(options) {
+    options = Object.assign({ text: "", value: "", selected: true }, options)
+
+    let option = document.createElement("option")
+    option.text = options.text
+    option.value = options.value
+    option.setAttribute("selected", options.selected)
+    return option
+  }
+
+  dataAttributesAreEqual(el1, el2) {
+    const keys1 = Object.keys(el1.dataset)
+    const keys2 = Object.keys(el2.dataset)
+    if (keys1.length !== keys2.length) return false
+
+    for (const key of keys1) {
+      if (el1.dataset[key] !== el2.dataset[key]) {
+        return false
+      }
+    }
+    return true
+  }
+
+  get hasFocus() {
+    const activeElement = document.activeElement;
+    if (activeElement === this.element ||
+      this.element.contains(activeElement) ||
+      this.element.querySelector(':focus') !== null) {
+      return true;
+    }
+    return false;
+  }
+
+  // Selected items are being cached in selectItemsTemplate. Sometimes we want to show the selected item in the results list
+  // As the selected item may not be in the results list, we cache the item in the template and re-add it when needed.
+  showSelectedItem() {
+    if (this.isMultipleValue
+      || this.freeTextValue
+      || this.hiddenSelectTarget.options.length === 0
+      || !this.hasFocus
+    ) return false;
+
+    const option = this.hiddenSelectTarget.options[0]
+    let item = this.itemsTarget.querySelector(`[data-satis-dropdown-item-value="${option.value}"]`)
+    if (item) {
+      item.classList.remove("hidden")
+    } else {
+      item = this.selectedItemsTemplateTarget.content.querySelector(`[data-satis-dropdown-item-value="${option.value}"]`)
+      if (item) {
+        item = item.cloneNode(true)
+        item.classList.remove("hidden")
+        item.setAttribute("data-satis-dropdown-target", "item")
+        item.setAttribute("data-action", "click->satis-dropdown#select")
+        this.itemsTarget.appendChild(item)
+      }
+    }
+
+    if(item) {
+      if (!this.resultsShown)
+        this.showResultsList()
+      this.setSelectedItem(option.value)
+    }
+
+    return item != null;
+  }
 }