The button loses focus from the button when moving to the next subpages

[lukaszpolowczyk]

The button loses focus from the button when moving to the next subpages:
Example (with a description of the problem): https://github.com/lukaszpolowczyk/focus-button

Problem

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

Question: How do I keep focus without using element.focus() or anything like that?

GIF with this:

The code looks like this:

<!-- src/routers/[slug].svelte -->
<svelte:head><title>Lost focus - Sveltekit Routers</title></svelte:head>
<script>
  import { page } from '$app/stores';
  
</script>
<br>
page {$page.params.slug}

　

<!-- src/routers/$layout.svelte -->
<script>
  import { page } from '$app/stores';
  import { goto } from '$app/navigation';
  
  import Keydown from "svelte-keydown";
</script>
<Keydown on:ArrowRight={() => goto(`${Number($page.params.slug)+1}`) } />

<button on:click={()=>goto(`${Number($page.params.slug)+1}`)}>goto({Number($page.params.slug)+1})</button>
or press RightArrow
<slot />

[dummdidumm]

GitHub issues are reserved for bug reports or feature requests. Please ask usage questions on StackOverflow or the Discord server.

By default a page change will not keep the element focused, that's an accessibility best practice default. You'll need to handle that yourself.

[ahtcx]

@dummdidumm could focusing the body not be optional? I'm having a similar issue where I have a search text field updating the URL with goto which will lose focus on each keystroke. I think this is a pretty common use-case and whilst it's possible to implement workarounds manually it would be a lot easier if it were an option in goto.

@lukaszpolowczyk 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.

[lukaszpolowczyk]

@dummdidumm @ahtcx
I want it too.
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.

[lukaszpolowczyk]

@dummdidumm Should I create a separate issue?
Can this issue be changed in feature request for sveltekit:keepfocus?

[dummdidumm]

Please open a new issue for the feature request.