huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix person removal from Combobox/Listbox demos (#1603)

Browse Source 
* Fix person removal from Combobox/Listbox demos

* Reset query on focus for Combobox demo with multiple items
This commit is contained in:
Vincent Bernat
2022-08-02 23:52:24 +02:00
committed by GitHub
parent db736d8c37
commit d8d852ee84
3 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/playground-react/pages/combobox/multi-select.tsx
+1
View File
@@ -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..."
/>
packages/playground-vue/src/components/combobox/multi-select.vue
+3 -4
View File
@@ -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>
packages/playground-vue/src/components/listbox/multi-select.vue
+2 -4
View File
@@ -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>