Issue when creating an expanding search bar using :focus-within - html

Question

I want to make a search bar as this website's search bar: https://www.arrivalguides.com/en.
I tried with this code: (Here's a codepen)
HTML:
<div class="col-md-4 d-flex justify-content-end all-buttons">
<div class="col-md-4 d-flex justify-content-end search-bar">
<a nbButton outline class="text-decoration-none add-btn" id="add-btn-hide" >
<i class="nb-plus fa-1x"> </i> Add User
</a>
<button nbButton class=" multi-delete-btn" id="delete-btn-hide" >
<i class="nb-trash fa-2x"></i>
Delete All
</button>
<input type="text" class="search-input" id="search-input" fullWidth nbInput placeholder="Enter Search" (keyup)="onKey($event)" />
<button nbButton class="search-btn" nbTooltip="Quick Search " nbTooltipPlacement="top" status="primary">
<!-- <nb-icon icon="search-outline"></nb-icon> -->icon
</button>
</div>
</div>
CSS:
body{
margin:40px;
}
.all-buttons {
height: 30px;
padding-right: 0;
}
.info-btn {
padding: 0.4rem;
border-radius: 0.25rem;
margin-right: 3px;
background-color: blue;
border-color: blue;
}
.advanced-filters {
background-color: green;
padding: 0.6rem 0 0 0;
border-radius: 0.5rem;
margin-left: 1px;
}
.multi-delete-btn {
margin: 0 8px 0 3px;
color:white;
background-color: orange;
border-color:orange;
border-radius: 0.25rem ;
padding: 0 5px 0 0 ;
opacity: 1 !important;
transition: width 0.5s ease-out;
}
.add-btn {
border-color:blue ;
background-color: blue ;
color: white;
padding: 0.5rem;
border-radius: 0.25rem;
margin: 0 ;
opacity: 1 !important;
transition: width 0.5s ease-out;
}
.search-bar {
border: none !important;
margin-right: 2px !important;
border-radius: 100px ;
min-width: 33px !important;
position: relative;
transition: width 0.5s ease-out;
}
.search-input {
background: transparent;
border: 0;
background-color: lightblue;
opacity: 0;
width:40px !important;
transition: width 0.5s ease-out;
&:focus {
outline: 0;
}
}
.search-btn {
cursor: pointer;
border: 2px solid blue;
border-radius: 0.25rem !important;
background: transparent;
margin: 0 !important;
position: absolute ;
top:0 ;
bottom:0;
right: 0;
}
.search-bar:focus-within{
width:50% !important;
border: 2px solid brown !important;
.search-input{
width: 100% !important ;
background-color: rgba(196, 158, 233, 0.205);
color: black !important;
cursor: initial ;
opacity: 1;
}
.add-btn{
display: none !important;
}
.multi-delete-btn{
display: none!important;
}
}
The issue:
When I click outside of the search icon, the "Add" button and "Delete-all" button should appear. But in my case they are just moving. (When I click the search icon, the add-button and delete-all button disappear– this is okay)

Answer 1

Here is an approach isolating only the search input and a search input container. The input is absolutely positioned inside a relative container so that I could grow the input from right to left. I did this by anchoring it to the right side of the parent container using right: 0.
I'm combining focus-within and placeholder-shown to grow/shrink the input. Using placeholder-shown is needed to prevent the input from shrinking if the user has typed something in the input. To hide the placeholder text and only show the search icon when the input is shrunk, I'm making the placeholder text color transparent.
.search-input-container {
position: relative;
}
.search-input {
--search-icon-width: 24px;
--search-max-width-expanded: 20rem;
--search-max-width-collapsed: 2.3rem;
--search-color: #ccc;
background-color: var(--search-color);
max-width: var(--search-max-width-collapsed);
padding: .5rem 0.75rem;
overflow: hidden;
transition: 0.3s max-width, 0.3s margin;
border: none;
background-image: url(https://image.flaticon.com/icons/png/512/93/93642.png);
background-size: 18px;
background-repeat: no-repeat;
background-position: calc(100% - 10px) 50%;
position: absolute;
right: 0;
font-size: 16px;
border-radius: 15px;
}
.search-input:focus-within,
.search-input:not(:placeholder-shown) {
max-width: var(--search-max-width-expanded);
padding-right: var(--search-icon-width);
}
.search-input:not(:focus-within)::placeholder {
color: transparent;
}
/* Ignore */
body {
display: grid;
place-items: center;
}
<div class="search-input-container">
<input placeholder="search" type="search" class="search-input">
</div>