How to set focus on the last field added to a fieldArray

[dandv]

In useFieldArray example, it would help the UX to set keyboard focus to the newly added element. How can that be done? That would be easy if append returned a ref to the field so it could be shared, but it returns void.

I've created a simple useFieldArray example with a TODO where I think the setFocus should go.

[bluebill1049]

That's actually a really good suggestion. Make sense for us to automatically focus on the appended item tho.

useFieldArray({
  name: 'test',
  focusAppend: true // auto focus by default.
})

[bluebill1049]

or

append({}, true); so you can focus on the input automatically. I think this is more flexible since we can allow this on prepending as well, and the user will have the option to avoid such behavior.

[bluebill1049]

Take a look at this CSB: https://codesandbox.io/s/react-hook-form-usefieldarray-focus-last-added-2px1i?file=/src/src/useFieldArray.ts

I think we will ship this with the release of V6.

[dandv]

Works great, thank you for such a rapid solution!

[vicentefb]

Hello, is there a class based component example of this ? I couldn't find it anywhere....

[nate15]

it does not work on 7.30.0 when using append({}, false)

[charlestbell]

Is there a chance that 'append' could get a callback argument in a future version? The goal would be the ability to execute code after the append takes place, and the callback would get the ref of the newly minted component passed into it so that you could focus the new item yourself.

The reason I ask is that I'm building a React Native app, so the built-in focus argument on append doesn't actually focus to open the on-screen keyboard in my app. I have to run .current.focus() to focus an input in RN

Or maybe an onAppend listener function that you could get from useFieldArray along with everything else.

Thoughts?

[bluebill1049]

It would be difficult because things as such are safer to have happened after useEffect.

[Tungetyt]

append(
      {},
      {
          shouldFocus: true,
      }
  );

doesn't work. I am trying to focus MUI TextField component - it is wrapped in Controller. Is there any workaround?

"react-hook-form": "^7.36.1",
@material-ui/core": "^4.11.4",
"react": "^17.0.2",

[Moshyfawn]

append(
      {},
      {
          shouldFocus: true,
      }
  );

doesn't work. I am trying to focus MUI TextField component - it is wrapped in Controller. Is there any workaround?

"react-hook-form": "^7.36.1",
@material-ui/core": "^4.11.4",
"react": "^17.0.2",

A usage example / repro required to try to help you resolve the issue

[mikhail-fedosenko]

It seems I've reproduced this:
https://codesandbox.io/s/react-hook-form-dependent-field-and-unregister-7n8i75?file=/src/App.js

if try to focus native input - it just works, both shouldFocus and by focusName.

[leapful]

@mikhail-fedosenko

You put the whole field from render prop of Controller component to MUI TextField therefore prop ref (which is not real DOM reference of input field element) from TextField also overrides focus behavior of prop inputRef.

Just exclude ref from field object then pass it directly to prop inputRef will solve the issue.

Working demo: https://codesandbox.io/s/react-hook-form-dependent-field-and-unregister-forked-msjzzu?file=/src/App.js

[mikhail-fedosenko]

@leapful thanks a lot, this helped.

I fixed that, but in my real case I created 2 useArrayFields and try to focus one of the inputs when appended. But in this case wrong input is focused (the last added, not the one specified by focusName).

https://codesandbox.io/s/react-hook-form-mui-textfield-ref-forked-t611wb?file=/src/App.js

Important to notice, that the order of append() calls is important: if I put the call append() with focusName specified last, then it works fine.

Any suggestions on this use case? Maybe there is a better approach to handle 2 dynamic lists of inputs that should be synchronised?

[leapful]

@mikhail-fedosenko

You are using 2 hooks useFieldArray but then append method call for each each hook will be applied in a batch of re-rendering, therefore, focus will be set and lose immediately after last input has been appeared. Furthermore, append method by default has shouldFocus is true that causes another wrong behavior too.

Any append call that is not the focused one should be place in next tick of rendering to solve this issue.

Working demo: https://codesandbox.io/s/react-hook-form-mui-textfield-ref-forked-764fbb?file=/src/App.js

[Magnuti]

For those wondering how to disable autofocus on new fields just write

append({...}, { shouldFocus: false })

focusOptions is not properly documented https://github.com/orgs/react-hook-form/discussions/9167