How to change ComboboxInput:displayValue on Keyboard Navigation in vue3 ?

[jameswong3388]

When navigating ComboboxOption with keyboard up/down right,
how can I change the :displayvalue also

Also right, how can I navigate to a certain ID when I click on a ComboboxOption e.g. /testing/<id>

Any help would be appreciated thx !

<template>
    <Dialog
        :open="isOpen"
        @close="setIsOpen"
        class="fixed inset-0 top-0 z-50 overflow-y-auto p-4 pt-[25vh]"
    >
        <DialogOverlay class="fixed inset-0 bg-gray-600/50" />

        <Combobox
            v-model="selectedPerson"
            as="div"
            class="relative mx-auto max-w-2xl divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5"
        >
            <div class="flex items-center px-4">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-6 w-6 text-gray-500"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                    />
                </svg>
                <ComboboxInput
                    class="h-12 w-full rounded-xl border-0 text-sm text-sm text-gray-800 placeholder-gray-400 focus:ring-0"
                    placeholder="Search..."
                    @change="query = $event.target.value"
                    :displayValue="(person) => person.name"
                />
            </div>
            <ComboboxOptions
                static
                class="max-h-96 overflow-y-auto py-4 text-sm"
            >
                <ComboboxOption
                    v-slot="{ active, selected }"
                    v-for="person in filteredPeople"
                    :disabled="person.unavailable"
                    :key="person.id"
                    :value="person"
                >
                    <div
                        class="space-x-1 px-4 py-2"
                        :class="{
                            'bg-blue-500 ': active,
                            'bg-white': !active,
                        }"
                    >
                        <span
                            class="font-medium"
                            :class="{
                                'text-white': active,
                                'text-gray-900': !active,
                            }"
                        >
                            {{ person.name }}
                        </span>
                        <span
                            :class="{
                                'text-indigo-200': active,
                                'text-gray-400': !active,
                            }"
                            >{{ person.field }}</span
                        >
                    </div>
                </ComboboxOption>
            </ComboboxOptions>
        </Combobox>
    </Dialog>
</template>

<script>
// Modules
import { defineComponent, ref, computed } from "vue";

// Components
import {
    Combobox,
    ComboboxInput,
    ComboboxOption,
    ComboboxOptions,
    Dialog,
    DialogOverlay,
} from "@headlessui/vue";

export default defineComponent({
    name: "SearchModal",

    components: {
        Combobox,
        ComboboxInput,
        ComboboxOption,
        ComboboxOptions,
        Dialog,
        DialogOverlay,
    },

    setup() {
        const people = [
            {
                id: 1,
                name: "Durward Reynolds",
                field: "Lorem Ipsum",
                url: "http://http://127.0.0.1:8000/testing/1",
                unavailable: false,
            },
            {
                id: 2,
                name: "Kenton Towne",
                field: "Dolor Sit",
                unavailable: false,
            },
            {
                id: 3,
                name: "Therese Wunsch",
                field: "Consectetur Adipiscing",
                unavailable: false,
            },
            {
                id: 4,
                name: "Benedict Kessler",
                field: "Quis Nostrud",
                unavailable: false,
            },
            {
                id: 5,
                name: "Katelyn Rohan",
                field: "Est Laborum",
                unavailable: false,
            },
            {
                id: 6,
                name: "Katelyn Rohan",
                field: "Est Laborum",
                unavailable: false,
            },
            {
                id: 7,
                name: "Katelyn Rohan",
                field: "Est Laborum",
                unavailable: false,
            },
            {
                id: 8,
                name: "Katelyn Rohan",
                field: "Est Laborum",
                unavailable: false,
            },
            {
                id: 9,
                name: "Katelyn Rohan",
                field: "Est Laborum",
                unavailable: false,
            },
            {
                id: 10,
                name: "Katelyn Rohan",
                field: "Est Laborum",
                unavailable: false,
            },

            { id: 11, name: "", field: "", unavailable: true },
        ];
        const selectedPerson = ref(people[11]);
        const query = ref("");

        const filteredPeople = computed(() =>
            query.value === ""
                ? people
                : people.filter((person) => {
                      return person.name
                          .toLowerCase()
                          .includes(query.value.toLowerCase());
                  })
        );

        let isOpen = ref(false);

        return {
            isOpen,
            query,
            selectedPerson,
            filteredPeople,

            setIsOpen(value) {
                isOpen.value = value;
            },
        };
    },

    created() {
        window.addEventListener("keydown", (event) => {
            if (event.key === "p" && (event.metaKey || event.ctrlKey)) {
                this.isOpen = !this.isOpen;
            }
        });
    },
});
</script>

<style scoped></style>