JSFiddle - React, Tailwind, and code Playground

by Vijayakrishnan Krishnan

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="btn-toolbar">
    <div class="btn-group kb-operable">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Menu</button>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#" data-action="action-1">Item #1</a></li>
            <li><a tabindex="-1" href="#" data-action="action-2">Item #2</a></li>
            <li><a tabindex="-1" href="#" data-action="action-3">Item #3</a></li>
		</ul>
	</div>
</div>

<input type="text" id="log">

CSS

.kb-oparable * {
    outline: none;
}
.selected-menu-item {
    background-color: #7f7 !important;
    outline: 0;
}

JavaScript

$('.kb-operable')

    .on('shown.bs.dropdown', function() {
        
		var menu = $(this).find('.dropdown-menu').first();
		menu.find('.selected-menu-item').removeClass('selected-menu-item');
		menu.find('li a').first().addClass('selected-menu-item');
		$(this).focus();
		return false;
        
	})

    .on('keydown', function(_e) {
		
        var menu = $(this).find('.dropdown-menu').first(), 
            target = false, 
            current = menu.find('.selected-menu-item').first();
        
        switch(_e.keyCode) {
            case 38: // up
                target = $(current).closest('li').prev();
                break;
            case 40: // down
                target = $(current).closest('li').next();
                break;
            case 27: // escape
                $(this).dropdown('toggle');
                return false;
            case 13: // enter
                $('#log').val($(current).data('action')).focus();
                $(this).dropdown('toggle');
                console.log(document.activeElement);
                return false;
        }
        
        if(target && target.length) {
            menu.find('.selected-menu-item').removeClass('selected-menu-item');
            target.find('a').first().addClass('selected-menu-item').focus();
        }
        
        return false;
        
    });