Input losing focus when moved up in array, but not on down?

[SanderRossel]

Hi all,

I'm kind of stumped here.
I've got a simple use case: I need to sort a list on date while changing the date.
However, when doing so, the list seems te rerender causing the control to lose focus.
I've tried everything and searched online, but to no avail.
Maybe I don't get how or when Vue rerenders elements, but the below code seems fine to me.
My actual code is still Vue 2, but for this sample I tried updating to Vue 3, but that didn't solve it.
The current workaround is to programmatically set focus to the control, but it makes it difficult to change the date as the cursor always goes back to the start and typing two digits, like 12, becomes a real hassle.

So I've gone back to the basics and made it so that the arrow down key moves a row one down, which works fine.
The right arrow key moves a row all the way to the bottom, which works fine if you're on either day or month input otherwise the control will lose focus.
The left arrow key moves a row all the way to the top, which works fine if you're on either month or year input otherwise the control will lose focus.
Every other key moves the row one down, which will cause the control to lose focus.

The :key binding in the v-for should prevent rerendering, or so I'm told.
What happens here that the control loses focus, but only on up and not on down?

Here's my complete code, you can simply copy-paste it and it'll work as described.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js"></script>

<div id="page">
	<div v-for="item in items" :key="item.id">
		<input type="date" v-model="item.date" @keydown="ondatechanged($event, item)" />
		<input v-model="item.description" />
	</div>
</div>

<script>
	let data = [{
		id: 1,
		date: '2024-11-01',
		description: 'Item 1'
	}, {
		id: 2,
		date: '2024-11-01',
		description: 'Item 2'
	}, {
		id: 3,
		date: '2024-11-02',
		description: 'Item 3'
	}, {
		id: 4,
		date: '2024-11-02',
		description: 'Item 4'
	}, {
		id: 5,
		date: '2024-11-02',
		description: 'Item 5'
	}, {
		id: 6,
		date: '2024-11-03',
		description: 'Item 6'
	}, {
		id: 7,
		date: '2024-11-03',
		description: 'Item 7'
	}];
	
	Vue.createApp({
		data() {
			return {
				items: data
			}
		},
		methods: {
			ondatechanged(ev, item) {
				let index = this.items.indexOf(item);
				this.items.splice(index, 1);
				if (ev.key == 'ArrowUp') {
					this.items.splice(index - 1, 0, item);
				} else if (ev.key == 'ArrowLeft') {
					this.items.splice(0, 0, item);
				} else if (ev.key == 'ArrowRight') {
					this.items.splice(this.items.length, 0, item);
				} else {
					this.items.splice(index + 1, 0, item);
				}
			}
		}
	}).mount('#page');
</script>