Cannot type in `<input>` after calling `.focus()` in `afterNavigate`

[geoffrich]

Describe the bug

When an input is programmatically focused in afterNavigate, it becomes focused, but you can't type in it.

This may be due to resetting selection. I can repro in Chrome and Safari, but not Firefox.

You can work around the issue by wrapping the focus call in a setTimeout.

Related: calling focus in afterNavigate was suggested as a workaround in https://github.com/sveltejs/kit/issues/7895#issuecomment-1332968486

Reproduction

Stackblitz

Use Chrome or Safari.

1. Tab to the "Page 1" link and trigger it. The input on the page is programatically focused but you can't type in it. If you instead trigger the "focus thing" button (which calls the same function), the input is focused and you can type in it
2. The same behavior occurs if you submit the form (which is a navigation) - the input is focused but you can't type in it.

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0 => 1.0.0 
    @sveltejs/kit: ^1.0.0 => 1.0.10 
    svelte: ^3.54.0 => 3.55.0 
    vite: ^4.0.0 => 4.0.4

Severity

serious, but I can work around it

Additional Information

No response