How can I use a combobox inside the AutoForm?

[mauriciodotso]

I was trying to use the combobox component inside an AutoForm. Here's what I did so far:

The AutoForm schema:

const formSchema = z.object({
  name: z.string().min(3).max(50),
  description: z.string(),
  image: z.string(),
  characteristics: z.array(z.number().nullable()).describe('characteristics')
});

The form:

<AutoForm :schema="formSchema" :field-config="{
    description: {
      component: 'textarea'
    },
    characteristics: {
      component: CharacteristicsCombobox,
      label: 'Characteristics'
    },
    image: {
      component: 'file'
    }
  }" :form="form" class="pt-10 w-2/3 space-y-6 max-w-2xl mx-auto" @submit="onSubmit">
    <Button type="submit">Submit</Button>
  </AutoForm>

And the CharacteristicsCombobox component:

<template>
  <FormField v-slot="slotProps" :name="fieldName">
    <FormItem v-bind="$attrs">
      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
        {{ config?.label }}
      </AutoFormLabel>
      <FormControl v-bind="slotProps">
        <Popover v-model:open="open">
          <PopoverTrigger as-child>
            <Button variant="outline" role="combobox" :aria-expanded="open" class="w-full">
              {{ values.length ? values.map(c => c.name).join(', ') : 'Select characteristics...' }}
            </Button>
          </PopoverTrigger>
          <PopoverContent>
            <Command v-model:search-term="query" multiple v-model:model-value="values">
              <CommandInput placeholder="Select categories..."/>
              <!-- TODO add create characteristic -->
              <CommandEmpty>No characteristics found.</CommandEmpty>
              <CommandList>
                <CommandGroup>
                  <CommandItem v-for="characteristic in characteristics.items"
                               :value="characteristic"
                               :key="characteristic.id"
                               class="flex justify-between"
                      >
                    {{ characteristic.name }}
                    <Check
                        :class="cn('mr-2 h-4 w-4', values.includes(characteristic) ? 'opacity-100' : 'opacity-0')"/>
                  </CommandItem>
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>
      </FormControl>
    </FormItem>
  </FormField>
</template>

<script setup lang="ts">
import {FormControl, FormField, FormItem} from "@/components/ui/form";
import {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList} from "@/components/ui/command";
import type {FieldProps} from "@/components/ui/auto-form";
import {AutoFormLabel} from "@/components/ui/auto-form";
import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
import {Button} from "@/components/ui/button";
import {ref, watch} from "vue";
import type {Characteristic} from "@/components/management/products/base";
import {router, usePage} from "@inertiajs/vue3";
import type {Page} from "@/components/list/list.vue";
import debounce from "lodash.debounce";
import {Check} from "lucide-vue-next";
import {cn} from "@/lib/utils";

const open = ref(false)
const query = ref('')
const values = ref<Characteristic[]>([])

export interface CharacteristicsForm {
  characteristics: Page<Characteristic>
}

const {props} = usePage<CharacteristicsForm>()
const characteristics = ref(props.characteristics)
watch(() => usePage().props.characteristics, (newCharacteristics) => {
  characteristics.value = newCharacteristics
})

const searchCharacteristics = debounce(() => {
  router.get('',
      {characteristic: query.value},
      {
        only: ['characteristics'], replace: true, preserveState: true, preserveScroll: true
      })
}, 500)
watch(query, searchCharacteristics);
defineProps<FieldProps>()
</script>

I'm having trouble figuring out how I can communicate to the parent form that the values were defined. In this case I would like to set the value as the array of the ids of the selected characteristics. Can someone point me in the right direction?