I am looking to create a search box that pops up when a button is clicked and disappears when clicked outside. My approach involves using CSS to achieve this functionality.
Here is the HTML structure I am working with:
<div tabindex="0" class="search">
<div id="mobileSearch" class="search-by-name form-group ember-view">
<div tabindex="0" role="button" id="ember415" class="ember-power-select-trigger ember-power-select-typeahead-trigger ember-basic-dropdown-trigger ember-view">
<input type="search" id="ember-power-select-typeahead-input-ember410" class="ember-power-select-typeahead-input ember-power-select-search-input">
</div>
<div id="ember-basic-dropdown-content-ember410" style="display: none;" class="ember-basic-dropdown-content-placeholder"></div>
</div>
<div type="button" class="btn mobile-search-button"></div>
</div>
Here is the corresponding SCSS code snippet:
.navbar {
> .container-fluid {
> .navbar-header {
> .search {
> #mobileSearch {
width: 42px;
height: 42px;
display: inline;
> div {
margin-top: 15px;
display: inline;
height: 42px;
position: absolute;
min-width: 0;
max-width: 0;
margin-left: 42px;
padding: 0;
border: none;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
}
}
> .search:focus {
outline: none;
}
.search > #mobileSearch > div:focus,
> .search:focus > #mobileSearch > div {
min-width: 220px;
max-width: 220px;
padding: 2px 16px 2px 8px;
margin-left: -178px;
border: 1px solid #ccc;
}
.mobile-search-button {
width: 42px;
height: 42px;
margin-top: 15px;
background-color: transparent;
background-image: url('/assets/search-128.png');
background-size: cover;
}
}
}
}
Currently, the search box appears on button click and hides when clicked outside, which works as intended. However, an issue arises when the user focuses on the input field, causing the search box to disappear. Unfortunately, due to the structure of the search box (nested divs with an input), I am unable to modify the inner layers as they are part of a plugin component.
I am seeking a solution that does not involve the use of Javascript.