xenophobic-harlequin

Is this a bug with removeValue on nested array elements?

Hey all, I thought I should ask here before posting the issue in the repo just in case. I have a made a minimal example which is attached but I'm not sure if its a bug or if I'm doing something wrong. I am trying to remove an object from a nested array. This is the schema

const createDeclarationFormSchema = z.object({
  consignments: z.array(z.object({
    id: z.string(),
    goodsItems: z.array(z.object({ // I want to remove a goodItem
      id: z.string(),
      commodityCode: z.string(),
      netMass: z.number(),
    }))
  })),
})

const createDeclarationFormSchema = z.object({
  consignments: z.array(z.object({
    id: z.string(),
    goodsItems: z.array(z.object({ // I want to remove a goodItem
      id: z.string(),
      commodityCode: z.string(),
      netMass: z.number(),
    }))
  })),
})

This is the code I use to do that (the console.logs are for debugging):

  <div className="text-xs text-muted-foreground" onClick={() => {
    const val = form.state.values.consignments[index].goodsItems[itemIndex]
    console.log(val)
    console.log(form.state.values.consignments[index].goodsItems)
    const newValues = form.state.values.consignments[index].goodsItems.filter((_, i) => i !== itemIndex)
    console.log(newValues)
    // form.setFieldValue(`consignments[${index}].goodsItems`, newValues)
    goodsField.removeValue(itemIndex)
    setTimeout(() => {
      console.log(form.state.values.consignments[index].goodsItems)
    }, 1000)
  }}>

  <div className="text-xs text-muted-foreground" onClick={() => {
    const val = form.state.values.consignments[index].goodsItems[itemIndex]
    console.log(val)
    console.log(form.state.values.consignments[index].goodsItems)
    const newValues = form.state.values.consignments[index].goodsItems.filter((_, i) => i !== itemIndex)
    console.log(newValues)
    // form.setFieldValue(`consignments[${index}].goodsItems`, newValues)
    goodsField.removeValue(itemIndex)
    setTimeout(() => {
      console.log(form.state.values.consignments[index].goodsItems)
    }, 1000)
  }}>

The result in the console is in the image but basically: - the obj is removed but then it appears again without the id value - I'm so confused 😦

message.txt

15 Replies

equal-aqua•7mo ago

Can you please reproduce it by forking a stackblitz example? https://tanstack.com/form/latest/docs/framework/react/examples/simple

React TanStack Form Simple Example | TanStack Form Docs

An example showing how to implement Simple in React using TanStack Form.