make sure we select the first match in the DOM for multiselect with more then one option selected

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

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() {