Clear combobox bugfix (#3934)

* Add failing tests * Fix clearing (or setting) selected
alpinejs · Jan 21, 2024 · c2e56bc · c2e56bc
1 parent ae16eb3
commit c2e56bc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/ui/src/combobox.js b/packages/ui/src/combobox.js
@@ -114,6 +114,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
@@ -66,6 +66,8 @@ test('it works with x-model',
 
                 <article x-text="selected?.name"></article>
             </div>
+
+            <a href="#" x-on:click.prevent="selected = { id: 7, name: 'Caroline Schultz' }">Set selected via code</a>
         </div>
     `],
     ({ 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'))
     },
 )
 
@@ -1271,6 +1276,7 @@ test('input reset',
             </div>
 
             <article>lorem ipsum</article>
+            <a x-on:click="selected = null">Clear</a>
         </div>
     `],
     ({ get }) => {
@@ -1327,6 +1333,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(''))
     },
 )