Estoy tratando de mostrar las búsquedas recientes cuando un usuario hace clic en el formulario de entrada para escribir algo. Y ocúltelo cuando el usuario haga clic fuera del cuadro de entrada. Estoy usando Vue ( v3.2.29 ).

Tengo la primera parte (que muestra el div cuando el usuario hace clic en el cuadro de entrada) funcionando pero no puedo resolver la segunda parte del problema.

Aparentemente, no hay una forma sencilla en JavaScript de saber si el DOM está enfocado o no.

Esta es mi función para esto:

 const showRecentSearches = () => { if (document.getElementById("search-box") === document.activeElement) { return true; } else { return false; } };

Esto funciona bien para mostrar el div cuando la entrada está enfocada, pero no lo oculta cuando está desenfocada.

Editar: este código de una discusión en GitHub resuelve el problema con una directiva personalizada para el evento de click-outside .