JSFiddle - React, Tailwind, and code Playground

HTML

<ul><li>Hit the "add tag" button to open the text field, then focus elsewhere - it closes. Okay good.</li><li>Open it again, type something, hit enter. Okay good.</li><li>NOW open it again, type something, and try to use "add tag" to submit something instead. NOPE.</li></ul>

<form id="input-blur">
    <label>
        <a href="#" id="new">add tag</a>
        <input type="text" style="display: none" />
    </label>
</form>

<br /><br />
<div></div>

CSS

form {
    border: 1px solid black;
    padding: 10px;
}

JavaScript

$(document).ready(function() {
    
    $("form").submit(function(e) {
        e.preventDefault();
        $("div").append("added: "+$("input").val()+"<br>");
        $("input").val("").hide();
    });
    
    $("a#new").on("click", function(e) {
        if ($("input").is(":visible")) {
            // THE PROBLEM: we never get in here because it's already been hidden because the input blurred
            if ($("input").val() != "") {
                // they've entered something
                $("div").append("added: "+$("input").val()+"<br>");
                $("input").val("").hide();
            }
            else {
                // it was open but nothing's in it
                $("input").hide();
            }
        }
        else {
            $("input").show().focus();
        }
    });

    $("input").on("blur", function() {
        setTimeout('$("input").hide()',500);
    });
    
});