JSFiddle - React, Tailwind, and code Playground

by tomsx

HTML

<div class="container">
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>

    </ul>
</div>

CSS

.container {
    height:100px;
    border-color:black;
    overflow:auto;
}
li {
    outline: none;
    cursor: default;
}
.active{
    background-color:yellow;    
}

JavaScript

$('div.container').on('focus', 'li', function() {
    $this = $(this);
    $this.addClass('active').siblings().removeClass();
    $this.closest('div.container').scrollTop($this.index() * $this.outerHeight());
}).on('keydown', 'li', function(e) {
    $this = $(this);
    if (e.keyCode == 40) {        
        $this.next().focus();
        return false;
    } else if (e.keyCode == 38) {        
        $this.prev().focus();
        return false;
    }
}).find('li').first().focus();