From 1a1dd4a611064c125275565ea171f8b763f49844 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=CE=B2o=CE=B3=20Wo=CE=B7d=CE=B5r?=
 <45801078+NehemiahAklil@users.noreply.github.com>
Date: Wed, 21 Aug 2024 08:22:48 +0300
Subject: [PATCH] docs: update Tags with Combobox example to make Popover close
 by clicking outside (#723)

---
 .../default/example/TagsInputComboboxDemo.vue | 48 ++++++++++---------
 .../example/TagsInputComboboxDemo.vue         | 48 ++++++++++---------
 2 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue b/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
index 2dfae1bc..27f53646 100644
--- a/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
+++ b/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
+import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
 import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
 import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
 
@@ -36,29 +36,31 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
       </ComboboxAnchor>
 
       <ComboboxPortal>
-        <CommandList
-          position="popper"
-          class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-        >
-          <CommandEmpty />
-          <CommandGroup>
-            <CommandItem
-              v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
-              @select.prevent="(ev) => {
-                if (typeof ev.detail.value === 'string') {
-                  searchTerm = ''
-                  modelValue.push(ev.detail.value)
-                }
+        <ComboboxContent>
+          <CommandList
+            position="popper"
+            class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+          >
+            <CommandEmpty />
+            <CommandGroup>
+              <CommandItem
+                v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
+                @select.prevent="(ev) => {
+                  if (typeof ev.detail.value === 'string') {
+                    searchTerm = ''
+                    modelValue.push(ev.detail.value)
+                  }
 
-                if (filteredFrameworks.length === 0) {
-                  open = false
-                }
-              }"
-            >
-              {{ framework.label }}
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
+                  if (filteredFrameworks.length === 0) {
+                    open = false
+                  }
+                }"
+              >
+                {{ framework.label }}
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </ComboboxContent>
       </ComboboxPortal>
     </ComboboxRoot>
   </TagsInput>
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue b/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
index 1cd0c08a..3fba69a3 100644
--- a/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
+import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
 import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
 import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
 
@@ -36,29 +36,31 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
       </ComboboxAnchor>
 
       <ComboboxPortal>
-        <CommandList
-          position="popper"
-          class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-        >
-          <CommandEmpty />
-          <CommandGroup>
-            <CommandItem
-              v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
-              @select.prevent="(ev) => {
-                if (typeof ev.detail.value === 'string') {
-                  searchTerm = ''
-                  modelValue.push(ev.detail.value)
-                }
+        <ComboboxContent>
+          <CommandList
+            position="popper"
+            class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+          >
+            <CommandEmpty />
+            <CommandGroup>
+              <CommandItem
+                v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
+                @select.prevent="(ev) => {
+                  if (typeof ev.detail.value === 'string') {
+                    searchTerm = ''
+                    modelValue.push(ev.detail.value)
+                  }
 
-                if (filteredFrameworks.length === 0) {
-                  open = false
-                }
-              }"
-            >
-              {{ framework.label }}
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
+                  if (filteredFrameworks.length === 0) {
+                    open = false
+                  }
+                }"
+              >
+                {{ framework.label }}
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </ComboboxContent>
       </ComboboxPortal>
     </ComboboxRoot>
   </TagsInput>