I cant get the combobox to stay open using multiple.

[StefanGhiban]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

^1.5.0

What browser are you using?

Chrome

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-wqpmmk?file=src%2FApp.vue&terminal=dev

Describe your issue

I have a problem using the multiple prop for a combobox. When I use multiple, it doesnt stay open for me to select multiple options. I am trying to make a reusable combobox component and I made it work but only with single options. I want to make it multiple. The following code is for the reusable component that is still in progress:

<template>
    <div class="w-72">
        <Combobox v-model="selected" @update:modelValue="$emit('update:modelValue', selected)">
            <div class="relative mt-1">
                <div
                    class="w-full overflow-hidden rounded-lg shadow-md focus:outline-none sm:text-sm"
                >
                    <!-- This is the combobox input text to find options -->
                    <ComboboxInput
                        class="w-full py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 outline-none"
                        :displayValue="(option) => (option as Test).label"
                        @change="query = $event.target.value"
                    />

                    <!-- This is the combobox select icon. -->
                    <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
                        X
                    </ComboboxButton>
                </div>
                <TransitionRoot
                    leave="transition ease-in duration-100"
                    leaveFrom="opacity-100"
                    leaveTo="opacity-0"
                    @after-leave="query = ''"
                >
                    <!-- This is the box of options for the select. -->
                    <ComboboxOptions
                        class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg focus:outline-none sm:text-sm"
                    >
                        <div
                            v-if="filteredOptions.length === 0 && query !== ''"
                            class="relative cursor-default select-none py-2 px-4 text-gray-700"
                        >
                            Nothing found.
                        </div>

                        <!-- The rendering for each option -->
                        <ComboboxOption
                            v-for="option in filteredOptions"
                            :key="option.key"
                            :value="option"
                            v-slot="{ selected, active }"
                        >
                            <li
                                class="relative cursor-default select-none py-2 pl-10 pr-4"
                                :class="{
                                    'bg-teal-600 text-white': active,
                                    'text-gray-900': !active,
                                }"
                            >
                                <span
                                    class="block truncate"
                                    :class="{
                                        'font-medium': selected,
                                        'font-normal': !selected,
                                    }"
                                >
                                    {{ option.label }}
                                </span>
                                <span
                                    v-if="selected"
                                    class="absolute inset-y-0 left-0 flex items-center pl-3"
                                    :class="{
                                        'text-white': active,
                                        'text-teal-600': !active,
                                    }"
                                >
                                    V
                                </span>
                            </li>
                        </ComboboxOption>
                    </ComboboxOptions>
                </TransitionRoot>
            </div>
        </Combobox>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import {
    Combobox,
    ComboboxInput,
    ComboboxButton,
    ComboboxOptions,
    ComboboxOption,
    TransitionRoot,
} from "@headlessui/vue";
import type { Test } from "@/models/common";

const props = withDefaults(
    defineProps<{
        options: Test[];
        label?: string;
        modelValue: Test;
        error?: string;
    }>(),
    {
        label: "",
        error: "",
    }
);

defineEmits<{
    (event: "update:modelValue", value: Test): void;
}>();

let selected = ref(props.modelValue);
let query = ref("");

let filteredOptions = computed(() =>
    query.value === ""
        ? props.options
        : props.options.filter((option) =>
              option.label
                  .toLowerCase()
                  .replace(/\s+/g, "")
                  .includes(query.value.toLowerCase().replace(/\s+/g, ""))
          )
);
</script>

And this is how I am using it:

<BaseSelect class="pb-3" v-model="selected" :options="selectOptions" />

const selectOptions: Test[] = [
    { key: 1, label: "Yes", value: 1 },
    { key: 2, label: "No", value: 0 },
    { key: 3, label: "Maybe", value: 0.5 },
];
const selected = ref<Test>(selectOptions[0]);

It would be nice if you could help me turn this single option combobox into a multiple one. Thank you!

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

I'm converting this to a discussion since this is not a bug.

I'm a bit confused with the provided StackBlitz vs the code snippets you provided here. You probably didn't save all your files on StackBlitz, this is what I see:

• For starters, make sure you are on the latest version of Headless UI. 1.5.x doesn't have multiple values support yet.
• Next, make sure that your "selected" value is an array and not a single value. If you want to have multiple values, then you have to use an array
• Last but not least, make sure to provide a multiple prop to the Combobox component to tell it to use multiple values instead.

Here is an example on how you can use multiple values: https://headlessui.dev/vue/combobox#selecting-multiple-values

Hope this helps

[StefanGhiban]

I understand that the current version that I am using is not the latest one. The purpose of the stackblitz was to just use the example from the documentation with the latest headlessui/vue version. In the stackblitz, even though I have copy pasted the example from the documentation, it doesnt seem to work, or rather I dont know how it should work.

[StefanGhiban]

Hey! Thank you for your question! Much appreciated! 🙏

I'm converting this to a discussion since this is not a bug.

I'm a bit confused with the provided StackBlitz vs the code snippets you provided here. You probably didn't save all your files on StackBlitz, this is what I see:

• For starters, make sure you are on the latest version of Headless UI. 1.5.x doesn't have multiple values support yet.
• Next, make sure that your "selected" value is an array and not a single value. If you want to have multiple values, then you have to use an array
• Last but not least, make sure to provide a multiple prop to the Combobox component to tell it to use multiple values instead.

Here is an example on how you can use multiple values: https://headlessui.dev/vue/combobox#selecting-multiple-values

Hope this helps

And also @RobinMalfait . I was wondering if you could maybe provide some sort of guides on how to make these components reusable. For example, there is no value prop for the combobox, just the v-model. It is weird having a v-model on the reusable component itself rather than having on the parent and sending a prop with v-model from the parent. I might not understand v-model enough, but in my opinion If you want some data on the parent, you send a v-model from there, not in the component, because as I see this, it is made to be used as standalone, not as reusable.