diff --git a/packages/ui/src/combobox.js b/packages/ui/src/combobox.js
index 50739fcc8..8f95a66ce 100644
--- a/packages/ui/src/combobox.js
+++ b/packages/ui/src/combobox.js
@@ -111,6 +111,8 @@ function handleRoot(el, Alpine) {
// if a user passed the "name" prop...
this.__inputName && renderHiddenInputs(Alpine, this.$el, this.__inputName, this.__value)
})
+
+ Alpine.effect(() => ! this.__isMultiple && this.__resetInput())
})
},
__startTyping() {
diff --git a/tests/cypress/integration/plugins/ui/combobox.spec.js b/tests/cypress/integration/plugins/ui/combobox.spec.js
index b3225dfba..d581b0fb7 100644
--- a/tests/cypress/integration/plugins/ui/combobox.spec.js
+++ b/tests/cypress/integration/plugins/ui/combobox.spec.js
@@ -66,6 +66,8 @@ test('it works with x-model',
+
+ Set selected via code
`],
({ get }) => {
@@ -95,6 +97,9 @@ test('it works with x-model',
get('ul').should(notBeVisible())
get('input').should(haveValue('Wade Cooper'))
get('article').should(haveText('Wade Cooper'))
+ get('a').click()
+ get('input').should(haveValue('Caroline Schultz'))
+ get('article').should(haveText('Caroline Schultz'))
},
)
@@ -1209,6 +1214,7 @@ test('input reset',
lorem ipsum
+ Clear
`],
({ get }) => {
@@ -1265,6 +1271,10 @@ test('input reset',
get('input').type('w')
get('article').click()
get('input').should(haveValue('Arlene Mccoy'))
+
+ // Test correct state after clearing selected via code
+ get('a').click()
+ get('input').should(haveValue(''))
},
)