We have recently added a new feature where, upon clicking on a button, a section appears with input fields and a search button. However, we are facing an issue - when using the tab key to navigate within the section, each element triggers a separate blur event, causing the section to hide prematurely. Our goal is for the entire div section to be hidden only when it goes out of focus completely. Is there a way to achieve this functionality without using jQuery?
function showButton() {
var x = document.getElementById("searchWithButton");
x.classList.add("display-none");
var y = document.getElementById("search");
y.classList.remove("display-none");
}
function showSearchDiv() {
var x = document.getElementById("searchWithButton");
x.classList.remove("display-none");
var y = document.getElementById("search");
y.classList.add("display-none");
var z = document.getElementById("searchInput");
z.focus();
}.red-border {
border: 2px solid red;
padding: 5px;
}
.display-none {
display: none;
}<div id="searchWithButton" onfocusout="showButton()" class="red-border display-none">
<input id="searchInput" type="text">
<button>Search</button>
</div>
<button id="search" onclick="showSearchDiv()">Search</button>