Version

3.0.7

Reproduction link

https://codesandbox.io/s/vee-validate-array-fields-forked-monhw?file=/src/App.vue

Steps to reproduce

https://codesandbox.io/s/vee-validate-array-fields-forked-monhw?file=/src/App.vue

Here is a demo to show that. This demo reorders the list of inputs by their numeric value. You can confirm that focused element looses the focus state when the order changed.

Remove the comment outed line to see the dirty fix. If this is intended, could I have a better solution for this?

What is expected?

Keep the focus state after an update event.

I would say this is vanilla JS behavior: an element detached and reattached to the DOM loses its focus. You have to manually focus it again.

We could look at document.activeElement before patching but I'm sure of its cost

@posva Thanks! looks like document.activeElement solution is more cleaner than mine.

Or maybe we can create a component something like this?(which similar to the <keep-alive> element)

<KeepFocus>
...
</KeepFocus>

Focus management is complex at some level, especially in terms of accessibility. We cannot maintain focus during the patching phase, as this may go against the user’s wishes(the patching is performed in the microtask queue). For the so-called <KeepFocus>, it can still be implemented on the user side, and the user has complete control over it.