|
@@ -125,6 +125,7 @@ function handleRoot(el, Alpine) {
|
|
|
if (! input) return
|
|
|
|
|
|
let value = this.$data.__getCurrentValue()
|
|
|
+
|
|
|
input.value = value
|
|
|
},
|
|
|
__getCurrentValue() {
|
|
@@ -262,9 +263,7 @@ function handleInput(el, Alpine) {
|
|
|
Alpine.bind(el, {
|
|
|
// Setup...
|
|
|
'x-ref': '__input',
|
|
|
- ':id'() {
|
|
|
- return this.$id('alpine-combobox-input')
|
|
|
- },
|
|
|
+ ':id'() { return this.$id('alpine-combobox-input') },
|
|
|
|
|
|
// Accessibility attributes...
|
|
|
'role': 'combobox',
|
|
@@ -273,15 +272,9 @@ function handleInput(el, Alpine) {
|
|
|
|
|
|
// We need to defer this evaluation a bit because $refs that get declared later
|
|
|
// in the DOM aren't available yet when x-ref is the result of an Alpine.bind object.
|
|
|
- async ':aria-controls'() {
|
|
|
- return await microtask(() => this.$refs.__options && this.$refs.__options.id)
|
|
|
- },
|
|
|
- ':aria-expanded'() {
|
|
|
- return this.$data.__isDisabled ? undefined : this.$data.__isOpen
|
|
|
- },
|
|
|
- ':aria-multiselectable'() {
|
|
|
- return this.$data.__isMultiple ? true : undefined
|
|
|
- },
|
|
|
+ async ':aria-controls'() { return await microtask(() => this.$refs.__options && this.$refs.__options.id) },
|
|
|
+ ':aria-expanded'() { return this.$data.__isDisabled ? undefined : this.$data.__isOpen },
|
|
|
+ ':aria-multiselectable'() { return this.$data.__isMultiple ? true : undefined },
|
|
|
':aria-activedescendant'() {
|
|
|
if (! this.$data.__context.hasActive()) return
|
|
|
|
|
@@ -289,9 +282,7 @@ function handleInput(el, Alpine) {
|
|
|
|
|
|
return active ? active.el.id : null
|
|
|
},
|
|
|
- ':aria-labelledby'() {
|
|
|
- return this.$refs.__label ? this.$refs.__label.id : (this.$refs.__button ? this.$refs.__button.id : null)
|
|
|
- },
|
|
|
+ ':aria-labelledby'() { return this.$refs.__label ? this.$refs.__label.id : (this.$refs.__button ? this.$refs.__button.id : null) },
|
|
|
|
|
|
// Initialize...
|
|
|
'x-init'() {
|
|
@@ -306,9 +297,7 @@ function handleInput(el, Alpine) {
|
|
|
this.$dispatch('change')
|
|
|
}
|
|
|
},
|
|
|
- '@blur'() {
|
|
|
- this.$data.__stopTyping()
|
|
|
- },
|
|
|
+ '@blur'() { this.$data.__stopTyping(false) },
|
|
|
'@keydown'(e) {
|
|
|
queueMicrotask(() => this.$data.__context.activateByKeyEvent(e, false, () => this.$data.__isOpen, () => this.$data.__open(), (state) => this.$data.__isTyping = state))
|
|
|
},
|
|
@@ -362,9 +351,7 @@ function handleButton(el, Alpine) {
|
|
|
Alpine.bind(el, {
|
|
|
// Setup...
|
|
|
'x-ref': '__button',
|
|
|
- ':id'() {
|
|
|
- return this.$id('alpine-combobox-button')
|
|
|
- },
|
|
|
+ ':id'() { return this.$id('alpine-combobox-button') },
|
|
|
|
|
|
// Accessibility attributes...
|
|
|
'aria-haspopup': 'true',
|
|
@@ -398,9 +385,7 @@ function handleButton(el, Alpine) {
|
|
|
function handleLabel(el, Alpine) {
|
|
|
Alpine.bind(el, {
|
|
|
'x-ref': '__label',
|
|
|
- ':id'() {
|
|
|
- return this.$id('alpine-combobox-label')
|
|
|
- },
|
|
|
+ ':id'() { return this.$id('alpine-combobox-label') },
|
|
|
'@click'() { this.$refs.__input.focus({ preventScroll: true }) },
|
|
|
})
|
|
|
}
|
|
@@ -409,9 +394,7 @@ function handleOptions(el, Alpine) {
|
|
|
Alpine.bind(el, {
|
|
|
// Setup...
|
|
|
'x-ref': '__options',
|
|
|
- ':id'() {
|
|
|
- return this.$id('alpine-combobox-options')
|
|
|
- },
|
|
|
+ ':id'() { return this.$id('alpine-combobox-options') },
|
|
|
|
|
|
// Accessibility attributes...
|
|
|
'role': 'combobox',
|
|
@@ -426,21 +409,15 @@ function handleOptions(el, Alpine) {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- 'x-show'() {
|
|
|
- return this.$data.__isStatic ? true : this.$data.__isOpen
|
|
|
- },
|
|
|
+ 'x-show'() { return this.$data.__isStatic ? true : this.$data.__isOpen },
|
|
|
})
|
|
|
}
|
|
|
|
|
|
function handleOption(el, Alpine) {
|
|
|
Alpine.bind(el, {
|
|
|
// Setup...
|
|
|
- 'x-id'() {
|
|
|
- return ['alpine-combobox-option']
|
|
|
- },
|
|
|
- ':id'() {
|
|
|
- return this.$id('alpine-combobox-option')
|
|
|
- },
|
|
|
+ 'x-id'() { return ['alpine-combobox-option'] },
|
|
|
+ ':id'() { return this.$id('alpine-combobox-option') },
|
|
|
|
|
|
// Accessibility attributes...
|
|
|
'role': 'option',
|