JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<p>To reproduce:</p>
<ol>
    <li>Type something in the textbox.</li>
    <li>Without losing focus from the textbox click the button with the mouse.</li>
    <li>The <code>click</code> event will not fire.  If you simply click the button without changing the value of the textbox it will.</li>
</ol>

<button>Initial</button>
<input>

CSS

/* Display only, doesn't affect the bug */
p, li { line-height: 1.5; }
p { margin-top: 0; }
ol { margin-bottom: 20px; }
body { padding: 10px; }

JavaScript

var button = document.getElementsByTagName('button')[0];
var input = document.getElementsByTagName('input')[0];

button.addEventListener('click', function() {
    alert('click');
});

input.addEventListener('change', function() {
    button.innerHTML = '<span>Changed</span>';
});