Reset value on custom input

[BettaKalpa]

Hi,

I have created a custom combobox with infinity scroll for retrieve large amount of data from the server; it's seems works fine except that for the reset; it's seems that this event it isn't propagate to the custom input.

Any one ever had the same problem or have a working example?

Thanks

[fenilli]

Do you mean node.reset() does not reset values from your custom formkit input?

[BettaKalpa]

Is your component a FormKit input?

const config: DefaultConfigOptions = {
  icons: { close, down, fileDoc, check, circle, checkboxDecorator: check },
  locales: { de, fr, es, it },
  locale: 'it',
  plugins: [
    createFloatingLabelsPlugin({
      useAsDefault: false, // defaults to false
    }),
    createMultiStepPlugin(),
  ],
  inputs: {
    [FormKitTypes.ServerSideCombo]: createInput(ServerSideSelectFK, {
      type: 'input',
      props: ['configuration']
    })
  }
}

This is my FormKit configuration file with the input declaration.

also are you calling reset inside onMounted?

No, I don't; Should I?

[fenilli]

Yes you should, as an ID is assigned after the component is called ( mounted ), otherwise it will be undefined.

[BettaKalpa]

Hmmm, maybe I didn't understand

<template>
    <ServerSideSelect v-bind="props.context!.configuration" @selected-item="selectedItem" @search="search"></ServerSideSelect>
</template>

<script setup lang="ts" generic="T">
import type { Pageable } from '@/components/global/DataTable.vue';
import ServerSideSelect from '@/components/global/ServerSideSelect.vue';
import type { SelectableObject } from '@/lib/interfaces';
import { onMounted } from 'vue';


onMounted(() => {
  props.context!.node.reset();
})

const props = defineProps({
  context: Object 
})

function selectedItem (item: SelectableObject | undefined) {
  props.context!.node.input(item ? item.value : undefined)
}

async function search( text: string | undefined, pageable: Pageable | undefined, onSuccess: (elems: T[]) => void, onError: () => void ) {
  try {    
    let results = await props.context!.configuration.searchFunction(pageable?.page, pageable?.rowsPerPage, pageable?.sortBy);
    onSuccess(results.elements);
  } catch (error) {
    onError();
  }
}

</script>

This is my input; as you suggest I added the onMounted function in which I reset the node.
This method is called when the form is created, but when I reset it (using the above mentioned function) nothing happens.

This is my form definition, on which I call the reset function

<FormKit :id="AppConstants.FORM_ROOT" type="form" :actions="false" @submit="handleSubmit" :plugins="[transtalateLabel, stepPlugin]">
                    <FormKitSchema :schema="props.form" :data="formData" />
                </FormKit>

and this is the form schema definition:

import { BreedService, CategoryService } from '@/service/api';
import { FormKitTypes, type FormKitSchemaDef, cmpFormKit } from './base/FormKitConstants';

const breedSection = "breed";
export const CategoryForm: FormKitSchemaDef = [
    {
        $cmp: cmpFormKit,
        props: {
            type: FormKitTypes.Hidden,
            name: "id",
            id: "id",
            value: "$object.id",
        }
    },
    {
        $cmp: cmpFormKit,
        props: {
            tytpe: FormKitTypes.Text,
            name: "code",
            id: "code",
            label: "CODE",
            validation: "required:trim",
            value: "$object.code",
            readonly: "$readonly",
            disabled: "$readonly"
        }
    },
    {
        $cmp: cmpFormKit,
        props: {
            type: FormKitTypes.Text,
            name: "type",
            id: "type",
            label: "NAME",
            value: "$object.type",
            validation: "required:trim",
            readonly: "$readonly",
            disabled: "$readonly"
        }
    },
    {
        $formkit: FormKitTypes.Group,
        id: breedSection,
        name: breedSection,
        children: [
            {
                $cmp: cmpFormKit,
                props: {
                    type: FormKitTypes.ServerSideCombo,
                    name: "id",
                    id: "id",
                    label: "BREED",
                    bind: '$attrs',
                    value: "$object.breed.id",
                    configuration: {
                        value: {
                            value:"$object.breed.id",
                            label: BreedService.breedRestfindById
                        },
                        readonly: "$readonly",
                        disabled: "$readonly",
                        searchHint: "",
                        inputStyle: "plain",
                        pageSize: 20,
                        labelPropName: "name",
                        searchFunction: BreedService.breedRestfindAll
                    }
                }
            }
        ]
    }

]

[fenilli]

Why are you reseting at the component itself when its mounted? reset is meant to reset the value of the node, so you probably should reset after something, what errors are showing?

Not sure what could be the problem in this case. What I see is that you're doing something like value: "$object.type", that isn't necessary if they have the correct name, no need to pass as data or use v-model for such cases, the configuration also isn't needed as you can just use context.attrs to bind anything you pass to it ahead.

[BettaKalpa]

Forgiveme for my late reply.
At the end I found the problem and it was on my own component implementation.
I debuged the problematic with implementing the input hook on the node.

Thank you for your time :)