JSFiddle - React, Tailwind, and code Playground

by Gonzalo Guevara

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="input-group">
  <input type="text" class="form-control" aria-label="..." placeholder="Click here, then press Tab">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#">Now press End</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Now press Home</a></li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /input-group -->

CSS

body{padding:2em;}

JavaScript

$('.input-group input').keydown(function(e){
	if(e.which == 9){ // tab
		e.preventDefault();
		$(this).parent().find('.dropdown-toggle').click();
		$(this).parent().find('.dropdown-menu a:first').focus();
	}
});

$('.dropdown-menu a').keydown(function(e){
	switch(e.which){
  	case 40:
    	e.preventDefault();
      $(this).closest('.dropdown-menu').find('a:first').focus();
      break;
		//case 36: // home
    	//e.preventDefault();
    	//$(this).closest('.dropdown-menu').find('a:first').focus();
      //break;
		//case 35: // end
    	//e.preventDefault();
    	//$(this).closest('.dropdown-menu').find('a:last').focus();
      //break;
  }
});