keyboard navigation

[jots]

This looks to be the most up to date svelte-virtual-list I noticed when using up/down arrow keys to navigate list, they stop working after a few clicks. I think the viewport is losing focus. any idea how to fix this?

[jots]

Looks like if I put viewport.tabIndex = 1 in onMount(() => { keyboard starts to work better. up/down pageup/pagedown work. home doesn't seem to work correctly and "end" key almost works, leaves off the bottom 3 rows.

[jots]

This seems to work. I'm new to svelte so please let me know if there is a better way:

onMount(() => {
    rows = contents.getElementsByTagName("svelte-virtual-list-row");
    viewport.tabIndex = 1
    viewport.addEventListener("keydown", function(e){
      if(e.key == "Home") {
        viewport.scrollTop = 0
      }
      if(e.key == "End") {
        viewport.scrollTop = viewport.scrollHeight
      }
    })
    mounted = true;
  });

[probablykasper]

@jots's code doesn't seems to work, so here's what I used. Added PageUp and PageDown as well. Only potential downside is that it scrolls instantly.

<script>
  let parentElement
  onMount(() => {
    const viewport = parentElement.querySelector('svelte-virtual-list-viewport')
    document.addEventListener('keydown', function(e) {
      let prevent = true
      if (e.key == 'Home') viewport.scrollTop = 0
      else if (e.key == 'End') viewport.scrollTop = viewport.scrollHeight
      else if (e.key == 'PageUp') viewport.scrollTop -= viewport.clientHeight
      else if (e.key == 'PageDown') viewport.scrollTop += viewport.clientHeight
      else prevent = false
      if (prevent) e.preventDefault()
    })
  })
</script>

<div tabindex="0" bind:this={parentElement}>
  <VirtualList/>
</div>