Svelte: How can I set the focus to the previous/next element in the list item when pressing UP arrow and DOWN arrow keys?

user_2153654 0
Viewed 1842

How can I set the focus to the Previous/Next element in the list item when pressing Up Arrow/Down Arrow keys in svelte?

I wanted to change the focus to next list item when pressing down arrow key and also change the focus to previous list item when pressing up arrow key from the keyboard, I have started working upon some code but it's still not working properly, so it would be great if someone could help me, thanks in advance

Code:-

<script>
    let keyCode;
    let item;
    
    function handleKeydown() {
        item =  document.getElementsByClassName('item');
        let itemLength = item.length;
        keyCode = event.keyCode;
        
        switch(keyCode){
            //ArrowUp
            case 38:
                //when clicking up arrow focus should move upwards li elements
            break;
            //ArrowDown
            case 40:
                //when clicking down arrow focus should move downwards li elements
            break;
        }   
    }
</script>

<style>
    .item:focus{
        border: 1px solid #000000;
    }
</style>

<svelte:window on:keydown={handleKeydown} />

<ul>
    <li class="item" tabindex="0" >
        <p>List Item 1</p>
    </li>
    <li class="item" tabindex="0" >
        <p>List Item 2</p>
    </li>
    <li class="item" tabindex="0" >
        <p>List Item 3</p>
    </li>
</ul>
svelte listitem keypress focus javascript
1 Answers

Here you go, explanation in comments within the code, demo REPL link at the end of the answer.

<script>
    // dereference the event object, isolating the 'keyCode' property since it's the only one needed
    function handleKeydown({ keyCode }) {
        // we're only interested in handling up & down arrow keys
        if (keyCode !== 38 && keyCode !== 40) return

        // currently focused element (if any)       
        const current = document.activeElement
        // get our collection of list elements and turn it into an actual array
        const items =  [...document.getElementsByClassName('item')]
        // attempt to match the currently focused element to an index in our array of list elements
        const currentIndex = items.indexOf(current)
        // index of the list element to be newly focused
        let newIndex
        
        // if the currently focused element was NOT a list item, then default to focusing the first item in the list (index 0)  
        if (currentIndex === -1) {
            newIndex = 0
        // otherwise, the currently focused element is an item in our list 
        } else {
            // if the UP key has been pressed, set the new index to the current index minus 1, plus the list size, modulo the list size
            if (keyCode === 38) {
                newIndex = (currentIndex + items.length - 1) % items.length
            // if the DOWN key has been pressed, set the new index to the current index plus 1, modulo the list size
            } else {
                newIndex = (currentIndex + 1) % items.length
            }
        }
        
        // blur (= unfocus) the currently focused element (whether it's a list element or not)
        current.blur()
        // focus the list element at the computed index
        items[newIndex].focus()
    }
</script>

Demo REPL

user_54386160
Related