From d8d852ee844f86059b44a6e37cb593fb00bbd161 Mon Sep 17 00:00:00 2001
From: Vincent Bernat <vincent@bernat.ch>
Date: Tue, 2 Aug 2022 23:52:24 +0200
Subject: [PATCH] Fix person removal from Combobox/Listbox demos (#1603)

* Fix person removal from Combobox/Listbox demos

* Reset query on focus for Combobox demo with multiple items
---
 packages/playground-react/pages/combobox/multi-select.tsx  | 1 +
 .../src/components/combobox/multi-select.vue               | 7 +++----
 .../playground-vue/src/components/listbox/multi-select.vue | 6 ++----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/playground-react/pages/combobox/multi-select.tsx b/packages/playground-react/pages/combobox/multi-select.tsx
index bda0153..8d80313 100644
--- a/packages/playground-react/pages/combobox/multi-select.tsx
+++ b/packages/playground-react/pages/combobox/multi-select.tsx
@@ -77,6 +77,7 @@ function MultiPeopleList() {
                     ))}
                     <Combobox.Input
                       onChange={(event) => setQuery(event.target.value)}
+                      onFocus={() => query != '' && setQuery('')}
                       className="border-none p-0 focus:ring-0"
                       placeholder="Search..."
                     />
diff --git a/packages/playground-vue/src/components/combobox/multi-select.vue b/packages/playground-vue/src/components/combobox/multi-select.vue
index 683a49d..54ab751 100644
--- a/packages/playground-vue/src/components/combobox/multi-select.vue
+++ b/packages/playground-vue/src/components/combobox/multi-select.vue
@@ -27,7 +27,7 @@
                         stroke="currentColor"
                         viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg"
-                        @click="removePerson(person)"
+                        @click.stop.prevent="removePerson(person)"
                       >
                         <path
                           stroke-linecap="round"
@@ -39,6 +39,7 @@
                     </span>
                     <ComboboxInput
                       @change="query = $event.target.value"
+                      @focus="query = ''"
                       class="border-none p-0 focus:ring-0"
                       placeholder="Search..."
                     />
@@ -151,9 +152,7 @@ function onSubmit(e) {
   console.log([...new FormData(e.currentTarget).entries()])
 }
 
-function removePerson() {
-  e.stopPropagation()
-  e.preventDefault()
+function removePerson(person) {
   activePersons.value = activePersons.value.filter((p) => p !== person)
 }
 </script>
diff --git a/packages/playground-vue/src/components/listbox/multi-select.vue b/packages/playground-vue/src/components/listbox/multi-select.vue
index dc66804..d19dcf6 100644
--- a/packages/playground-vue/src/components/listbox/multi-select.vue
+++ b/packages/playground-vue/src/components/listbox/multi-select.vue
@@ -27,7 +27,7 @@
                         stroke="currentColor"
                         viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg"
-                        @click="removePerson(person)"
+                        @click.stop.prevent="removePerson(person)"
                       >
                         <path
                           stroke-linecap="round"
@@ -143,9 +143,7 @@ function onSubmit(e) {
   console.log([...new FormData(e.currentTarget).entries()])
 }
 
-function removePerson() {
-  e.stopPropagation()
-  e.preventDefault()
+function removePerson(person) {
   activePersons.value = activePersons.value.filter((p) => p !== person)
 }
 </script>