sveltekit:keepfocus

Is your feature request related to a problem? Please describe.

1. Refresh page
2. Press Tab key on the keyboard
3. The button are focused
4. Press Right Arrow on the keyboard
5. The button loses focus

GIF with this:

Describe the solution you’d like Maybe similar to sveltekit:noscroll and goto(href, { replaceState, noscroll }) , e.g. sveltekit:keepfocus and goto(href, { replaceState, keepfocus })?

It looks like something easy to do. L245 of router.js would have to give in a similar condition as L254 of router.js.

Describe alternatives you’ve considered Described by @ahtcx in https://github.com/sveltejs/kit/issues/968#issuecomment-817378602

as a workaround I’ve been using patch-package on L245 of router.js but this isn’t ideal and I imagine router.js will change a lot so you’ll have to update it at every change.

How important is this feature to you? Using the keyboard and keeping the application focused is a matter of accessibility in general.

[ahtcx]

My use case for this would be within the goto function. I have a search page /search/[searchQuery] which I would like to update on user input. (for an example, see Spotify’s web client)

The issue is that on input change, focus is lost from the text input. There are possible workarounds but they’re a pain and not very clean.

I think that it’s a nice option to have, as it allows more flexibility with the router with very little overhead.

[MatthiasGrandl]

I have the same issue. I am implementing a search with query parameters and it’s supposed to fetch filtered content live from the load function. So goto definitely makes sense here in my opinion…