How do I make it so that my search bar does not collapse when it's on focus?

I can't seem to get my search bar from collapsing when the bar itself is receiving focus, but my mouse is not hovering it. How do I make it so that my search bar does not collapse when it is receiving focus even though my mouse pointer is not hovering it?

Here's the CSS and HTML:

.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #474646;
  height: 40px;
  border-radius: 50px;
  padding: 10px;
}

.search-box .search-btn {
  color: #bb14bb;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #474646;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .4s;
}

.search-box .search-text {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: .4s;
  line-height: 40px;
  width: 0px;
}

.search-box:hover>.search-text {
  width: 240px;
  padding: 0 6px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div class="search-box">
  <input class="search-text" type="text" name="box" placeholder="Search here...">
  <a class="search-btn" href="#">
    <i class="fas fa-search"></i>
  </a>
</div>

Solution

You need to activate on focus @ the class .search-text, I modified your code and added it to your given code, when you hover your mouse away from the box it won't loose size unless you clicked out

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .search-box{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   background: #474646;
   height: 40px;
   border-radius: 50px;
   padding: 10px;
}
.search-box .search-btn{
   margin-top: -10px;
   color: #bb14bb;
   float: right;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #474646;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: .4s;
}
.search-box .search-text{
 margin-top: -10px;
 border:none;
 background: none;
 outline: none;
 float: left;
 padding: 0;
 color: white;
 font-size: 16px;
 transition: .4s;
 line-height: 40px;
 width: 0px;
}

.search-box:hover > .search-text{
    width: 240px;
    padding: 0 6px;
}
/*this will keep your text box active as far as its in focus, even the mouse is hovered away.*/
.search-text:focus{
    width: 240px;
    padding: 0 6px;
}
</style>
<body>
    <div class="search-box">
        <input class="search-text" type="text" name="box" placeholder="Search here...">
          <a class="search-btn" href="#">
             <i class="fas fa-search"></i>
          </a>
      </div>

</body>
</html>