mute-gold

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

helpful-purple•10mo 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.

mute-goldOP•10mo ago

@Leonardo https://stackblitz.com/edit/tanstack-form-dbycl9vt?file=src%2Findex.tsx

StackBlitz

Form Simple Example (forked) - StackBlitz

Run official live example code for Form Simple, created by Tanstack on StackBlitz

mute-goldOP•10mo ago

I also have a start repo with it

helpful-purple•10mo ago

I think it's on L131, there's something wrong with the data and item.id probably being undefined sometimes, if you put itemIndex there the error goes away

mute-goldOP•10mo ago

Yes react reports a bug. But I am increasing sure that this is a tan stack form bug. item.id should never be undefined Based on the code

mute-goldOP•10mo ago

This is the same code I just use form.setFieldValue( consignments[${index}].goodsItems, newValues ); instead of removeValue

mute-goldOP•10mo ago

You can look at the link now I updated it so its a little easier to see what is happening: https://stackblitz.com/edit/tanstack-form-dbycl9vt?file=src%2Findex.tsx

StackBlitz

Form Simple Example (forked) - StackBlitz

Run official live example code for Form Simple, created by Tanstack on StackBlitz

mute-goldOP•10mo ago

@Leonardo

helpful-purple•10mo ago

Ok so if you remove from the last one it works fine If you remove from the middle, the first removal operation looks weird, then it works fine right?

mute-goldOP•10mo ago

Its not only that it looks weird. Its that it inserts an object for some reason. Like before removal we have 4, we filter one out we have 3 then we have 4 after update again But yes if we remove the last element it works fine

helpful-purple•10mo ago

Got it, thanks! Could you please cleanup the example a little bit more to make it really the minimal set of instructions to replicate it and open an issue? There's probably something that has to be fixed on Form 🙂

mute-goldOP•10mo ago

Sure, It will have to be monday though

helpful-purple•10mo ago

That's fine! Thank you 😄

mute-goldOP•10mo ago

I made the issue now. Will clean up the stackbliz monday though God dammit this drove me crazy yesterday 🤣

Gaming

Programming

Is this a bug with removeValue on nested array elements?

Did you find this page helpful?