Emit events from custom created inputs

[GueganVictor]

Hi !

I would like to add a custom combobox as a FormKit input. I have two values I need to get from this component :

• the value of the selected field (which I get back with the props.context.node.input method)
• and the search value which I need to filter my options

The value of the combobox is perfectly retrieved and available in my form but I would like to access the search input value also.
I have tried some things, (emit events, change props.context.attrs, ...) but events aren't triggered back to my FormKit component and attrs aren't reactive obviously.

Any idea to get around that ?

Thanks !

[BilalShah3]

did you found any solution

[fenilli]

One way is to add your events as props and call whenever you need it, events are just cb functions, so you can use a feature/plugins to add it.

So if you do node.addProps(['myEvent']);

you will be able to context.node.props.myEvent('call').

[BilalShah3]

i did not understand here is my code can you guide me

custom component

<template>
<BaseAutoComplete
    :items="context.attrs.items"
    :modelValue="context._value"
    :search="context.attrs.search"
    @update:modelValue="context.node.input($event)"
    @update:search= "handleSearch($event)"
/>
</template>

<script setup>
import BaseAutoComplete from './BaseAutoComplete.vue';
const props = defineProps({
    context: Object
})

function handleSearch($event) {
}

</script>

Parent :

<FormKit 
     label="Address *"
     v-model="autoaddress"
     :items="items"
     v-model:search="searchaddress"
     type="addressautocomplete"
     outer-class="flex-1 min-w-[300px] md:max-w-[340px]"
  />

v-model works fine but search is not working?

[SuddenDev]

In case someone else is looking for this: This is how I solved it with @fenilli 's comment (https://github.com/orgs/formkit/discussions/943#discussioncomment-8908894).

// formkit.config.js

const formKitConfig = {
    // ...
    inputs: {
        phone: createInput(PhoneInput, {
            family: "text",
            props: ['updateObject'],
        }),
    },
};

My custom vue-tel-input component:

<!-- PhoneInput.vue (child) -->

<script setup lang="ts">
import { VueTelInput } from "vue-tel-input";
import "vue-tel-input/vue-tel-input.css";
import {type FormKitFrameworkContext} from "@formkit/core"

const props = defineProps<{
  context: FormKitFrameworkContext
}>();

function handleInput(e, object) {
    props.context.node.input(e);
    props.context.node.props.updateObject(object)
}

const inputOptions = computed(() => ({
    name: props.context.node.name,
    autocomplete: props.context.node.props.autocomplete || "on",
    id: props.context.node.props.id,
    maxlength: props.context.node.props.maxlength || 25,
    placeholder: props.context.node.props.placeholder,
    tabindex: 0,
    type: "tel"
}));
</script>

<template>
    <vue-tel-input
        v-model="(props.context._value as string)"
        @on-input="handleInput"
        :inputOptions="inputOptions"
    />
</template>

and in the parent component:

<!-- parent.vue -->

  <FormKit
         type="phone"
         v-model="model.phone1"
         :updateObject="(obj) => model.phone1Object = obj"
         name="phone1"
         :label="$t('backend.experts.phoneNumberOne')"
         validation="required"
  />

Basically instead of using an event emitter just call the prop as a function with your parameters / payload inside.
I do find this very odd in behavior, especially since it sounds like it should work with node.emit() as described in the docs, but that works for me for now.

[waresm]

Thanks so much, I was going crazy trying to figure this out.

You'd think it would be pretty basic... FormKit fully supports using Vue components to create custom inputs, and adding props is well documented and easy to do.

But then I needed to emit an event, and the documentation on that is: "just use node.emit(), lol"

They should really add a section in the Custom Input guide, at least to give us a start point on how to do it.