JSFiddle - React, Tailwind, and code Playground

by nwe44

HTML

<div class="search-wrapper">
    <input type="search" class="search" value="" />
</div>
<a href="#" id="selector">Click me</a>
<br />If the search has a grey background, it's focused

CSS

/* This is just some normalization so we can style the search box in webkit, the observed focus issue happens regarless of this normalization */
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/*end normalization */
.search-wrapper{
    overflow:hidden;
    width:200px;
    position:relative;
    height:50px;
    padding:5px;
}
.search{
    -webkit-transition: margin 1s ease-out;
    -moz-transition: margin 1s ease-out;
    -o-transition: margin 1s ease-out;
    transition: margin 1s ease-out;        
    left:5px;
    width:120px;
    position:absolute;
    border:1px solid #f1f1f1;
    padding:10px;
}
.search:focus{
    background:#e2e2e2;            
}

JavaScript

$('#selector').click( function (e) {
    e.preventDefault();
    setTimeout( function () {

        $('.search').focus().css('border', '1px solid red');    
        
    }, 500);

});