Prevent element to lose CSS "focus" when changing browser tabs - css

Question

The JSFiddle speaks for itself
Open this fiddle http://jsfiddle.net/NfRN5/
Click the input field
Change tabs on your browser
Come back to the fiddle - the width effect will run again =/
Is there a way to prevent this and make it steady when the user navigates away and comes back?
To view the problem in this thread, you will need to click the "Expand snippet" button. The small preview doesn't demonstrate the issue in question.
input.search-field {
width: 100px;
transition: all 1s ease-in-out;
}
input.search-field:focus {
width: 300px;
}
<input type="search" class="search-field">

Answer 1

In chat you mentioned you were trying to emulate Apple.com's search bar.
After peaking at their JS, I came up with this fiddle: http://jsfiddle.net/NfRN5/7/
The trick is to only blur the input in the 10ms following a mousedown, or some keypresses.
var $search = $('.search-field'), searchBlurable = false
$search
// Always focus when focused
.focus(function(e){
$search.addClass('focused')
searchBlurable = false
})
// Only blur after mouse or key events
.blur(function(e){
if(searchBlurable){
$search.removeClass('focused')
}
})
// Set Blurable for tab/esc
.keydown(function(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){
searchBlurable = true
window.setTimeout(function () {
searchBlurable = false
}, 10)
})

Answer 2

I don't believe that can be achieved in pure CSS.
Try some JavaScript / jQuery: http://jsfiddle.net/NfRN5/3/
var $fields = $(".search-field")
$fields.focus(function(){
$fields.removeClass('focused')
$(this).addClass('focused')
})
You can't use the blur event because that is called by the browser when you change tabs.
I made some assumptions about what the rest of the code in your app will look like, you might have to add some other triggers to remove the focused class.

Answer 3

I use a complementary class to handle it.
Add the "focus" class to the active element when the window loses focus (window.blur) and remove the class when it gets focus back.
window.addEventListener("focus", function () {
document.querySelectorAll(".focus").forEach((el) => {
el.classList.remove("focus");
}, false);
});
window.addEventListener("blur", function () {
let el = document.activeElement;
if (el !== null) el.classList.add("focus");
}, false);
input.search-field {
width:100px;
transition: all 1s ease-in-out;
}
input.search-field:focus,
input.search-field.focus {
width:300px;
}
<input type="search" class="search-field">