I have no idea how to ask this question, but here's problem:

I have this kind of search bar ^ and when you double click on it it shrinks and input is disappearing (display: none). But when it disappears

And I-beam cursor shows. So I can't click or double click on it anymore (for some reason) I tried input.blur(); but because it's not focused it didn't work. I have no clue what to google to fixed. I tried some but there weren't any related answers.

HTML:

<div class="search-field">
    <input placeholder="Search" type="text">
    
    <img src="search.svg" title="Double Click to toggle">
    <img src="grip-lines.svg" alt="||" id="drag">
</div>

I use keyframes so I will how CSS too: (Edit: I will put more about css)

.search-field {
     position: absolute;
     width: 385px;
     width: 20%;
    background-color: #FFFFFF;
    top: 15px;
    left: 8%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 5px;
    border-radius: 10px;
    border: 1px black solid;
  }
  input {
        height: 80%;
        width: 300px;
        outline: none;
        transition: .3s;
        border-radius: 10px;
        border: 1px black solid;
        padding: 3px 5px;
        background-color: #E4E9F7;
   }

  @keyframes openSearch {
    0% {
        width: 77px;
    }
    100% {
        width: 385px;
    }
  }
  @keyframes closeSearch {
    0% {
        width: 385px;
    }
    100% {
        width: 77px;
    }
  }

  .openedSearch {
      animation: openSearch 0.5s both;
  }
  .closedSearch {
      animation: closeSearch 0.5s both;
  }

JS:

    let searchState = true
    let toggleSearchState = () => {
    searchState = !searchState
    if (searchState == true) {
        searchField.className = 'search-field openedSearch'
        input.style.display = 'block'
       } else {
        searchField.className = 'search-field closedSearch'
        input.style.display = 'none'
      }
   }

searchBtn.addEventListener('dblclick', toggleSearchState)