Input element sometimes won't get focus (with Superforms)

[ciscoheat]

Describe the bug

As you certainly know, Superforms has an autoFocusOnError option, enabled as default, focusing on an error field when the form is submitted. I noticed that the Input component doesn't always get focus.

I've been debugging Superforms, changing the wait time before focusing from the current await tick() to setTimeout with 100 ms delay, but nothing seems to work, so I don't think it's a Superforms issue.

Reproduction

https://github.com/ciscoheat/shadcn-svelte-not-focusing

Instructions are included there.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 44.72 GB / 63.93 GB
  Binaries:
    Node: 21.4.0 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.22.21 - ~\AppData\Local\pnpm\yarn.CMD
    npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.5 - ~\AppData\Local\pnpm\pnpm.CMD
    bun: 1.0.32 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (123.0.2420.81)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.5
    svelte: 5.0.0-next.100 => 5.0.0-next.100
    sveltekit-superforms: ^2.12.4 => 2.12.4

Severity

annoyance

[ciscoheat]

Current workaround:

$effect(() => {
	if ($errors.amount) {
		setTimeout(() => document.querySelector('input[name="amount"]')?.focus());
	}
});

[huntabyte]

Can you reproduce this with Svelte 4? I'm not able to. Or does the same thing happen with a regular (non-component) input?

You're on the money about usually using a tick() or otherwise, but it seems like in this case waiting for the state to update via $effect() then focusing would work but it shouldn't have to be like that.

[ciscoheat]

True, I cannot reproduce it on Svelte 4 either. But it works with a regular input even on Svelte 5.

I could post an issue at the Svelte repo, but maybe a dependency on both Superforms and shadcn-svelte won't be appreciated. :)

[huntabyte]

We could just recreate an <Input /> component and use it with only Superforms to isolate the issue further before bringing it to their attention!

[ciscoheat]

I think I managed to reproduce it without any of the libs, will post an issue at Svelte.

[ciscoheat]

Nope, it was harder than I thought.

[huntabyte]

So you can't reproduce by creating an <Input /> component and using it in place of the one for shadcn-svelte? All it does is wrap a regular input.