useFieldArray with a search filter values in the row are not persisted in v6

[cyrilgeorgemv]

https://codesandbox.io/s/amazing-rgb-ny637

The above sandbox have a list of objects with name and localName where localName is mapped to a text field. When the list is filtered using the name the localName values are lost . The same code works if I update the lib to the latest version 7.25. So wanted to know if it is possible to achieve the same with v6

v7 working sandbox

Steps to test

1. Input any value against name 'five'
2. Search for 'one'
3. Clear the search field
4. localName for 'five' is lost

[Moshyfawn]

So, here's what I found.

• Use dot notation over bracket notation to set the name of the localName field <Controller />

<Controller
  name={`data.${i}.localName`}
/>

• Use RHF version lower than 6.11.0. Due to some change, the behavior you want doesn't work since 6.11.0

See this CSB

[Parteek11]

hi @cyrilgeorgemv
edited your code.
main point is register the input fields with a unique id specific to that row not using index.

import { useState } from "react";
import { Controller, useFieldArray, useForm } from "react-hook-form";
import "./styles.css";

export default function App() {
const { control, handleSubmit } = useForm({
mode: "onChange",
defaultValues: {
data: [
{ name: "one", localName: "" },
{ name: "two", localName: "" },
{ name: "three", localName: "" },
{ name: "four", localName: "4" },
{ name: "five", localName: "" }
]
},
shouldUnregister: false
});
const aArray = useFieldArray({
name: "data",
control
});
const submitData = handleSubmit((d) => {
console.log(d.data);
});
const [s, setS] = useState("");
return (

<input
type="search"
placeholder="Search"
value={s}
onChange={(e) => setS(e.target.value)}
/>
<ul style={{ gap: "1rem", display: "grid" }}>
<li
style={{
display: "flex",
justifyContent: "space-around"
}}
>

Name

Local Name

{aArray.fields
.filter((f) => f.name.includes(s))
.map((f, i) => (
<li
key={f.id}
style={{
display: "flex",
justifyContent: "space-around"
}}
>

{f.name}

<Controller
control={control}
defaultValue={f.localName}
name={f.name}
render={({ field: { onChange, value } }) => (
<input
value={value}
onChange={(e) => onChange(e.target.value)}
/>
)}
/>

))}

Submit

);
}