No tengo idea de cómo hacer esta pregunta, pero aquí hay un problema:

Tengo este tipo de barra de búsqueda ^ y cuando haces doble clic en ella, se reduce y la entrada desaparece ( display: none ). Pero cuando desaparece

Y se muestra el cursor I-beam. Así que ya no puedo hacer clic o hacer doble clic en él (por alguna razón) probé input.blur(); pero debido a que no está enfocado, no funcionó. No tengo idea de qué buscar en Google para solucionarlo. Intenté algunas pero no hubo respuestas relacionadas.

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>

Uso fotogramas clave, así que también usaré CSS: (Editar: pondré más sobre 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)