[Bug]: Vue Transition with Combobox about radix-vue HOT 18 CLOSED

<template>
  <div>
    <ComboboxRoot v-model="selected">
      <ComboboxAnchor>
        <ComboboxTrigger>
          <span v-if="selected.length === 0">{{ placeholder }}</span>
          <span v-else>{{ selected }}</span>
          <Icon name="radix-icons:caret-sort" />
        </ComboboxTrigger>
      </ComboboxAnchor>

      <div>
        <ComboboxPortal>
          <Transition name="fade">
            <ComboboxContent position="popper">
              <ComboboxViewport class="flex flex-col">
                <div>
                  <Icon name="radix-icons:magnifying-glass" />
                  <ComboboxInput
                    :placeholder="placeholder ? placeholder : 'Search...'"
                  />
                </div>
                <ComboboxGroup>
                  <ComboboxItem
                    v-for="(option, item) of options"
                    :key="item"
                    :value="option"
                  >
                    <span>{{ option }}</span>
                    <ComboboxItemIndicator>
                      <Icon name="radix-icons:check" />
                    </ComboboxItemIndicator>
                  </ComboboxItem>
                </ComboboxGroup>

                <ComboboxEmpty />
              </ComboboxViewport>
            </ComboboxContent>
          </Transition>
        </ComboboxPortal>
      </div>
    </ComboboxRoot>
  </div>
</template>

<script setup lang="ts">
const selected = ref("");
const placeholder = ref("Placeholder...");
const options = ref(["Nuxt", "Vue", "Svelte", "Tauri"]);
</script>

<style>
div[data-radix-popper-content-wrapper] {
  top: 4px !important;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

<script setup lang="ts">
import {
  ComboboxAnchor,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxPortal,
  ComboboxViewport,
  ComboboxTrigger,
  ComboboxRoot
} from 'radix-vue'

const selected = defineModel<string>({
  required: true
})

defineProps<{
  id?: string
  options: string[]
  placeholder?: string
	emptyText?: string
}>()
</script>

<template>
  <ComboboxRoot v-model="selected">
    <ComboboxAnchor class="w-[inherit]">
      <ComboboxTrigger
        class="inline-flex items-center justify-between whitespace-nowrap transition-colors border border-gray-300 rounded-md hover:bg-gray-100 w-full px-2.5 py-1.5"
      >
        <span v-if="selected.length === 0">{{ placeholder }}</span>
        <span v-else>{{ selected }}</span>
        <Icon name="radix-icons:caret-sort" class="w-4 h-4 text-gray-500" />
      </ComboboxTrigger>
    </ComboboxAnchor>

		<div>
			<ComboboxPortal>
				<Transition name="fade">
					<ComboboxContent
						position="popper"
						class="border border-gray-300 rounded-md bg-white shadow-md w-[--radix-combobox-trigger-width] z-10"
					>
						<ComboboxViewport class="flex flex-col">
							<div class="flex items-center space-x-1.5 border-b border-b-gray-200 px-2.5 w-full">
								<Icon
									name="radix-icons:magnifying-glass"
									class="min-w-4 min-h-4 text-gray-500"
								/>
								<ComboboxInput
									:placeholder="placeholder ? placeholder : 'Search...'"
									class="py-1.5 w-full focus:outline-none bg-transparent placeholder:text-gray-500"
								/>
							</div>
							<ComboboxGroup class="p-1">
								<ComboboxItem
									v-for="(option, item) of options"
									:key="item"
									:value="option"
									class="flex items-center justify-between rounded-md px-2 py-1 data-[highlighted]:bg-gray-100 transition-colors cursor-pointer"
								>
									<span>{{ option }}</span>
									<ComboboxItemIndicator class="flex items-center">
										<Icon name="radix-icons:check" class="w-4 h-4" />
									</ComboboxItemIndicator>
								</ComboboxItem>
							</ComboboxGroup>

							<ComboboxEmpty class="p-3">
								{{ emptyText ? emptyText : 'No option' }}
							</ComboboxEmpty>
						</ComboboxViewport>
					</ComboboxContent>
				</Transition>
			</ComboboxPortal>
		</div>
  </ComboboxRoot>
</template>

<style>
div[data-radix-popper-content-wrapper] {
  top: 4px !important;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>

<script setup lang="ts">
const darkMode = ref(false)
const selectedCombobox = ref('')
const optionsCombobox = ref(['Nuxt', 'Vue', 'Svelte', 'Tauri'])
const accept = ref(false)
const selectedRadio = ref('')
const optionsRadio = ref(['Default', 'Comfortable', 'Compact'])
</script>

<template>
  <div class="p-2 space-y-2">
    Nuxt module playground!
    <div class="flex items-center space-x-2">
      <label for="airplane">Dark mode</label>
      <Switch
        id="airplane"
        offIcon="radix-icons:sun"
        onIcon="radix-icons:moon"
        v-model="darkMode"
      />
    </div>
    <Avatar src="https://avatars.githubusercontent.com/u/72009265?v=4" fallback="DA" />
    <Combobox
      v-model="selectedCombobox"
      :options="optionsCombobox"
      placeholder="Select framework..."
      emptyText="No framework found."
      class="w-[200px]"
    />
    <label class="flex flex-row gap-2 items-center">
      <Checkbox v-model="accept" />
      <span class="select-none">Accept terms and conditions.</span>
    </label>
    <RadioGroup v-model="selectedRadio" :options="optionsRadio" />
  </div>
</template>