Input not focused properly when calling focus() in afterNavigate

[alialaa]

Describe the bug

I would like to have an input in a page that receives focus upon client side navigation. I am trying to call input.focus() in afterNavigate however what happens is that the input receives focus (it has the focus ring) but for some reason you can't type in it except if you click on it or blur and focus again. This can be fixed by wrapping input.focus() with setTimeout. However I am not sure why this behaviour happens.

Reproduction

Go to the about page and the input will be focused but without to ability to type in it except after adding setTimeout.

https://stackblitz.com/edit/sveltejs-kit-template-default-4gq2mu?file=src/routes/about/+page.svelte

Logs

No response

System Info

System:
    OS: macOS 12.1
    CPU: (8) arm64 Apple M1
    Memory: 427.33 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.11 - ~/.npm-global/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
    Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 105.0.5195.125
    Safari: 15.2
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.75 
    @sveltejs/kit: next => 1.0.0-next.484 
    svelte: ^3.49.0 => 3.50.1

Severity

annoyance

Additional Information

No response

[Rich-Harris]

Huh. Interestingly it works correctly in Firefox, but not in Chrome

[dummdidumm]

Fixed via #8466