Custom Input component with vee-validate can't use in useFieldArray ?

[nasirDoe]

What happened?

I have custom input and i use in useFieldArray fields array. when i try to remove item the field is removed it, other item reset and property is removed

This my array before i removed item with key 1

[
  {
    "key": 0,
    "value": {
      "id": 5,
      "name": "Ichi Ocha",
      "uom_id": 1,
      "uom_name": "Bal",
      "qty": "12",
      "price": 12000,
      "discount": 0
    },
    "isFirst": true,
    "isLast": false
  },
  {
    "key": 1,
    "value": {
      "id": 1,
      "name": "Product explicabo",
      "uom_id": 2,
      "uom_name": "Box",
      "qty": "10",
      "price": 1000,
      "discount": 0
    },
    "isFirst": false,
    "isLast": true
  }
]

This is after removed item with key 1, some property is gone

[
  {
    "key": 1,
    "value": {
      "id": 1,
      "name": "Product explicabo",
      "uom_id": 2,
      "uom_name": "Box"
    },
    "isFirst": true,
    "isLast": true
  }
]

Reproduction steps

...

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

--

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

Could be intended, can you create an example for it on codesandbox or stackblitz?

[nasirDoe]

here is the reproduction link:

when array have 2 items and i try remove the first item, the second item will remove too

https://stackblitz.com/edit/vee-validate-custom-input

[logaretm]

Thanks for reporting this and for the reproduction. There was indeed a bug, but keep in mind you also need to do this:

// props.name is not reactive, so you either make it callback like this or use `toRef`
const { errorMessage, handleChange, value } = useField(() => props.name);

The bug was deleting some keys of the object like you mentioned but not the entire thing. a patch release will be tagged shortly.

As a workaround you can also remove initialValue: props.value and it should work.

[nasirDoe]

cool fast update, i have try it and never see that bug again. جَزَاكَ اللهُ خَيْرًا كَثِيْرًا