JSFiddle - React, Tailwind, and code Playground

HTML

<form id="searchform">
<input id="s" type="search" autocomplete="off" name="s" value="">
<div id="search-submit" class="input-group-addon">
    <i>SUBMIT</i>
</div>
</form>

CSS

#search-submit {
    padding: 5px;
    background-color: #CCC;
    margin: 20px;
    cursor: pointer;
}

JavaScript

var inProgress = false; 

$("#search-submit").on("mousedown", function() {
    inProgress = true;
});

$("#search-submit").on("click", function() {
    console.log ("Form Submit");
    inProgress = false;   
});

$("#s").on("blur", function () {
    if ( ! inProgress ) {
        console.log ("Blur");
		inProgress = false; 
	}
});