JSFiddle - React, Tailwind, and code Playground

by Rajeswaritest

HTML

<input type="text" tabindex="0"/>
<div>
<ul tabindex="-1" >
<li tabindex="0" aria-label="Pages">
  <span class="msos-selected-display-item-text">Pages</span>
  <button class="msos-quick-delete" tabindex="-1"      name="new_availability-selected-item-delete-1" aria-label="Remove Pages">
     <span class="msos-glyph">X</span>
  </button>
</li>
<li tabindex="0" aria-label="Forms">
  <span class="msos-selected-display-item-text">Forms</span>
  <button class="msos-quick-delete" tabindex="-1"      name="new_availability-selected-item-delete-1" aria-label="Remove Forms">
     <span class="msos-glyph">X</span>
  </button>
</li>

</ul>
<input type="text" tabindex="0"/>

JavaScript

this.$("li").on("keydown", function(e) 
                {
                    
                    var key = e.keyCode.toString() || e.key || e.code;
					
                    switch(key) {
                        // escape
                        case "Escape":
                        case "27":
                            // nothing to do if the dropdown is closed
          
							//alert(key + "_handleEscape");
                            break;

                        // tab key
                        case "Tab":
                        case "9":
							//alert(key + "_handleTab");
                   
                            break;

                        case "Enter":
                        case "13":
							//alert(key + "_handleTab");
                            break;

                        case "ArrowLeft":
                        case "ArrowUp":
                        case "ArrowRight":
                        case "ArrowDown":
                        case "Numpad2":
                        case "Numpad4":
                        case "Numpad6":
                        case "Numpad8":
                        case "37": // arrow left
                        case "38": // arrow up
                        case "39": // arrow right
                        case "40": // arrow down
                        case "98": // numpad 2 (down)
                        case "100": // numpad 4 (left)
                        case "102": // numpad 6 (right)
                        case "104": // numpad 8 (up)
                          
							//alert(key + "_handleArrows");
                            break;

                        case "Backspace":
                        case "Delete":
                        case "8":
                        case "46":
                   
							//alert(key + "_handleDelete");
                            break;

                        default:
                            break;
                    }
                });