title: Mouse stuck on Input?
body: <p>I have no idea how to ask this question, but here's problem:</p>
  <p><a href="https://i.stack.imgur.com/pZKRt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pZKRt.png" alt="enter image description here" /></a></p>
  <p>I have this kind of search bar ^  and when you double click on it it shrinks and input is disappearing (<code>display: none</code>). But when it disappears<br />
  <a href="https://i.stack.imgur.com/MYsoT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MYsoT.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;search-field&quot;&gt;
      &lt;input placeholder=&quot;Search&quot; type=&quot;text&quot;&gt;
      
      &lt;img src=&quot;search.svg&quot; title=&quot;Double Click to toggle&quot;&gt;
      &lt;img src=&quot;grip-lines.svg&quot; alt=&quot;||&quot; id=&quot;drag&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I use keyframes so I will how CSS too: (Edit: I will put more about css)</p>
  <pre><code>.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;
    }
  </code></pre>
  <p>JS:</p>
  <pre><code>    let searchState = true
      let toggleSearchState = () =&gt; {
      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)
  </code></pre>