JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <h1>KeyEvent testing</h1>
    <hr>
  </header>
  <section id="buttonville">
	Event: 
	<select id="event">
		<option value="keydown" selected="selected">keydown</option>
		<option value="keypress">keypress</option>
		<option value="keyup">keyup</option>
	</select>
	<p>
	<span id="initFunc">initKeyboardEvent</span> ( event, true, true, document.defaultView
	<select id="keyboardEventVersion">
		<!-- generated based on the browser type -->
	</select>
	<p>
    <h2>Via generic Event object</h2>
    <ul id="buttons-generic">
      <li>
        <button data-key="37">Left</button>
        <button data-key="39">Right</button>
        <button data-key="38">Up</button>
        <button data-key="40">Down</button>
        <button data-key="13">Enter</button>
        <button data-key="27">Esc</button>
        <button data-key="65">A</button>
      </li>
    </ul>
    <h2>Via KeyboardEvent object</h2>
    <ul id="buttons-normal">
      <li>
        <button data-key="37">Left</button>
        <button data-key="39">Right</button>
        <button data-key="38">Up</button>
        <button data-key="40">Down</button>
        <button data-key="13">Enter</button>
        <button data-key="27">Esc</button>
        <button data-key="65">A</button>
      </li>
    </ul>
    <h2>Via hacked KeyboardEvent object</h2>
    <ul id="buttons-hacked">
      <li>
        <button data-key="37">Left</button>
        <button data-key="39">Right</button>
        <button data-key="38">Up</button>
        <button data-key="40">Down</button>
        <button data-key="13">Enter</button>
        <button data-key="27">Esc</button>
        <button data-key="65">A</button>
      </li>
    </ul>
    <h2>Via jQuery</h2>
    <ul id="buttons-jq">
      <li>
        <button data-key="37">Left</button>
        <button data-key="39">Right</button>
        <button data-key="38">Up</button>
        <button data-key="40">Down</button>
        <button data-key="13">Enter</button>
        <button...

CSS

ul.logs {
  list-style:none;
}

ul.logs > li {
  background-color:#FFFFCC;
  padding:5px;
  border-bottom:solid 1px #CCC;
}
textarea, input {
    background-color: #D0F0D0;
}

JavaScript

function initEvent(eventObj, event, keyCode, keyName, type)
{
	var view = document.defaultView
    if (eventObj.initKeyboardEvent) {
		if (type == 1)	eventObj.initKeyboardEvent(event, true, true, view, keyName, 0, "", false, "");
    } else {
		if (type == 1)		eventObj.initKeyEvent(event, true, true, view, false, false, false, false, keyCode, 0);
		else if (type == 2)	eventObj.initKeyEvent(event, true, true, view, false, false, false, false, keyCode, keyCode);
    }
	
	// IE, Chrome: 
	// initKeyboardEvent(event, canBubble, cancelable, view, 
	// key, 		String
	// location, 	Number
	// modifiers, 	String
	// repeat,		Boolean 
	// locale 		String
	// );
	
	// Firefox:
	// initKeyEvent(event, canBubble, cancelable, view, 
	// ctrlKey, 	Boolean
	// altKey, 		Boolean
	// shiftKey, 	Boolean
	// metaKey, 	Boolean
	// keyCode, 	String
	// charCode, 	String
	// );
}

var EventGenerator = {};

// Solutions from http://stackoverflow.com/questions/10455626/keydown-simulation-in-chrome-fires-normally-but-not-the-correct-key
EventGenerator.fire_Hacked = function(target, event, keyCode, keyName, type) {
    var eventObj = document.createEvent('KeyboardEvent');

    // Chromium Hack
    Object.defineProperty(eventObj, 'keyCode', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     
    Object.defineProperty(eventObj, 'which', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     
	
    initEvent(eventObj, event, keyCode, keyName, type);

    eventObj.keyCodeVal = keyCode;

    target.dispatchEvent(eventObj);	
}

// Solution from http://stackoverflow.com/questions/596481/simulate-javascript-key-events
// few versions, neither works
EventGenerator.fire_JQ = function(target, event, keyCode, keyName) {
	jQuery.event.trigger({ type : event, which : keyCode, target: target });
	var e = jQuery.Event(event, { 
		keyCode: keyCode, 
		altKey: false, 
		bubbles: true,...