JSFiddle - React, Tailwind, and code Playground

HTML

<input /><br/>
<input type="search" class="search-field" />
<div>something to click on</div>

CSS

.search-field {
  width:100px;
  transition: all 1s ease-in-out;
}
.search-field.focused {
  width:300px;
}

JavaScript

var $search = $('.search-field'), searchBlurable = false

$search
// Always focus when focused
.focus(function(e){
    console.log(e)
    $search.addClass('focused')
    searchBlurable = false
})

// Only blur after mouse or key events
.blur(function(e){
    console.log(e)
    if(searchBlurable){
        $search.removeClass('focused')
    }
})

// Set Blurable for tab/esc
.keydown(function(e){
    console.log(e)
    if(e.keyCode === 27 || e.keyCode === 9) { // esc || tab
        searchBlurable = true
        $search.blur()
    }
})

// Set Blurable for 10ms after a mousdown
$('html').mousedown(function(e){
    console.log(e)
    searchBlurable = true
    window.setTimeout(function () {
        searchBlurable = false
    }, 10)    
})