make sure we select the first match in the DOM for multiselect with m…

…ore then one option selected
alpinejs · Jun 30, 2023 · cc3f8ff · cc3f8ff
1 parent 53dc53a
commit cc3f8ff
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/ui/src/combobox.js b/packages/ui/src/combobox.js
@@ -161,13 +161,14 @@ function handleRoot(el, Alpine) {
  }
  }
 
- this.__activateSelectedOrFirst()
-
  // Safari needs more of a "tick" for focusing after x-show for some reason.
  // Probably because Alpine adds an extra tick when x-showing for @click.outside
  let nextTick = callback => requestAnimationFrame(() => requestAnimationFrame(callback))
 
- nextTick(() => this.$refs.__input.focus({ preventScroll: true }))
+ nextTick(() => {
+ this.$refs.__input.focus({ preventScroll: true })
+ this.__activateSelectedOrFirst()
+ })
  },
  __close() {
  this.__isOpen = false

diff --git a/packages/ui/src/list-context.js b/packages/ui/src/list-context.js
@@ -51,7 +51,14 @@ export function generateContext(multiple, orientation, activateSelectedOrFirst)
 
  getItemsByValues(values) {
  let rawValues = values.map(i => Alpine.raw(i));
- return this.items.filter(i => rawValues.includes(Alpine.raw(i.value)))
+ let filteredValue = this.items.filter(i => rawValues.includes(Alpine.raw(i.value)))
+ filteredValue = filteredValue.slice().sort((a, b) => {
+ let position = a.el.compareDocumentPosition(b.el)
+ if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1
+ if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1
+ return 0
+ })
+ return filteredValue
  },
 
  getActiveItem() {