JSFiddle - React, Tailwind, and code Playground

HTML

<p>Click here, then click on the input. Four events should fire: mousedown, focus, mouseup, click.</p>
<input type="text" value="" id="input1" placeholder="placeholder" />
<br />
<pre id="log1"></pre>

CSS

input {
    overflow: visible;
}

input:focus {
    overflow: hidden;
}

JavaScript

var log = document.getElementById('log1');
var input = document.getElementById('input1');

input.addEventListener('focus', function(e) {
    log.innerHTML += e.type + '<br />';
});
input.addEventListener('click', function(e) {
    log.innerHTML += e.type + '<br />';
});
input.addEventListener('mousedown', function(e) {
    log.innerHTML += e.type + '<br />';
});
input.addEventListener('mouseup', function(e) {
    log.innerHTML += e.type + '<br />';
});