JSFiddle - React, Tailwind, and code Playground

by flynfish

HTML

<div id="work-area">
<div id="work-area_content">
<table id="ymm_table">
<tbody>
<tr>
<td class="year-drop drop"><table style="width: 100px;">
<tbody>
<tr>
<td>
            <div>
                  <div>Year</div></div></td>
</tr>
<tr>
<td><select class="ymm_select" onblur="" tabindex="15" style="width: 100%;" onkeypress="" size="20" name="centerYearSOL" id="centerYearSOL">    <option value="2012">2012</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    <option value="2007">2007</option>
    <option value="2006">2006</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    <option value="2002">2002</option>
    <option value="2001">2001</option>
    <option value="2000">2000</option>
    <option value="1999">1999</option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
    <option value="1996">1996</option>
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>
    <option value="1980">1980</option>
    <option value="1979">1979</option>
    <option value="1978">1978</option>
    <option value="1977">1977</option>
    <option value="1976">1976</option>
    <option value="1975">1975</option>
    <option value="1974">1974</option>
    <option value="1973">1973</option>
    <option value="1972">1972</option>
    <option...

CSS

button:focus,
input:focus,
select:focus,
textarea:focus {
  -moz-box-shadow: #b7131c 0 0 3px 0;
  -webkit-box-shadow: #b7131c 0 0 3px 0;
  -o-box-shadow: #b7131c 0 0 3px 0;
  box-shadow: #b7131c 0 0 3px 0;
  z-index: 1;
}

input[type="file"]:focus, input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}

.drop {
     padding: 5px;   
}

JavaScript

var currentSelection = 0;


$(".ymm_select").keydown(function(e) {

    e.preventDefault();

    switch(e.keyCode) { 
       // User pressed "left" arrow
       case 37:
          navigate('left');
       break;
       // User pressed "right" arrow
       case 39:
          navigate('right');
       break;
    }
 });

function navigate(direction){
   
// Check if any of the menu items is selected    \
    if($("#ymm_table .ymm_select").size() == 0) {      
        currentSelection = -1;    
    }        
    
    if(direction == 'left' && currentSelection != -1) {     
        if(currentSelection != 0) {          
            currentSelection--;       
        }    
    } else if (direction == 'right') {       
        if(currentSelection != $("#ymm_table .ymm_select").size() -1) {                      currentSelection++;                                                }    
    }    
    
    setSelected(currentSelection)
        
;}

function setSelected(menuitem) {
   $("#ymm_table .ymm_select").eq(menuitem).focus();

}