Get field.id from append of useFieldArray

[Rathalin]

Hello,

I'm using the append function of useFieldArray({ ... }) and need the new field.id to focus on the new element. The focus { shouldFocus: true } of append doesn't help here, because I'm managing the focus myself. Any ideas on how to manage the situation?

I was expecting the new id to be returned to do something like this:

const fieldId = append({ title: 'New element' })
setFocus(fieldId)

Thank you for your time!
Rathalin

[leapful]

@Rathalin

Function append always add item at the end of field array. You just need to watch on change of fields object from useFieldArray hook to get last item and set focus on it.

For example:

useEffect(() => {
   setFocus(fields[fields.length - 1].id);
}, [fields])

[Rathalin]

Not exactly what I was hoping for but thanks for the idea. I'll have to extend your solution since I only want to focus on the last array field once after clicking the append button.

[anuj9196]

Is there any direct way now? I'm also trying to get id of the newly added field. Will try the shared answer though.

[Rathalin]

Although I didn't find a direct way, here is my current solution (simplified):

const [lastFieldAction, setLastFieldAction] = useState<'append' | 'move' | 'remove' | null>(null)
const { fields, append, remove, move } = useFieldArray({ ... })

useEffect(() => {
  if (lastFieldAction === 'append') {
    const lastUuid = fields.at(-1)?.uuid;
    if (lastUuid != null) {
      // Do something with ID
    }
  }
}, [fields, lastFieldAction])

return (
  <>
    {items.map((item) => {(
      <Item onRemove(() => {
        remove(item.id)
        setLastFieldAction('remove')
      }) />
    )}
    <Button
      onClick(() => {
        append()
        setLastFieldAction('append')
      })
    >
      {'Add'}
    </Button>
  <>
)