JSFiddle - React, Tailwind, and code Playground

HTML

<p id="version"></p>
<input id="input" type="text"/>

<p>Instructions:</p>
<ol>
    <li>Click on the page background</li>
    <li>Click in the input textbox</li>
    <li>Type a couple of characters</li>
    <li>Hit Enter</li>
    <li>Hit Enter again</li>
</ol>

<p>EXPECTED RESULTS: The green ENTER indicator bar should flash for each press.</p>

<p>ACTUAL RESULTS: The green ENTER bar does NOT flash for the first press, although the red CHANGE bar does. The green bar DOES flash for the second press.</p>

<p id="enter">document received ENTER keydown event</p>
<p id="change">input received change event</p>

CSS

p {
    margin: 1em 0 0;
}

#enter {
    display:none;
    padding:4px;
    color:white;
    background-color:green;
}

#change {
    display:none;
    padding:4px;
    color:white;
    background-color:red;
}

JavaScript

$("#version").text("Using jQuery " + $.fn.jquery);

$(document).keydown(function(evt) {
    if (evt.keyCode == 13) {
        $("#enter").stop(true, true).fadeTo(0, 1).fadeTo(1000, 0);
    }
});

$("#input").bind("change", function(evt) {
    $("#change").stop(true, true).fadeTo(0, 1).fadeTo(1000, 0);
    //if (evt.keyCode != 13) return; // this prevents the issue
    evt.stopPropagation();
});