javascript - Angular: Evitar que el campo de entrada pierda el enfoque si se hace clic en el botón

Entonces, tengo un campo de entrada para una búsqueda de texto. Se puede activar presionando enter o haciendo clic en un botón. Ahora me gustaría agregar la función de que si escribes "ABC" y presionas enter, se realiza la búsqueda; y luego, cuando agregas un par de caracteres (por ejemplo, "123" para obtener "ABC123") pero dejas el campo de entrada sin presionar enter, me gustaría revertir el contenido del campo de entrada a "ABC", para mostrar al usuario que ese fue el último término de búsqueda.

He implementado eso con (blur)="resetInput()" en el campo de texto, sin embargo, el problema es que si el usuario hace clic en el botón (después de añadir "123" a "ABC"), el blur también se activará, lo que hace que el campo de texto se reinicie (a "ABC") y luego la búsqueda se ejecute después (con "ABC" en lugar de "ABC123").

He leído que esto se debe al orden en que se ejecutan click y blur, y que podrías evitarlo usando mousedown en lugar de click en el botón, pero eso cambiaría el comportamiento de la página, porque la búsqueda se ejecutaría al presionar el ratón en lugar de al soltarlo (que es lo que sucede si usas el evento (click))

¿Hay una alternativa a esto?

Respuesta #1

Gracias a todos por sus respuestas, ahora lo he solucionado llamando a event.preventDefault() en mouseDown, lo que bloqueará el evento blur y permitirá que se ejecute el evento (click) con el texto de entrada sin cambios.

Respuesta #2

Esto podría ser una solución alternativa si estás de acuerdo con tener un retraso muy corto en restablecer el valor al perder el foco.

searchClicked = false;

// Handles the Search Button Click
handleSearchClick() {
 this.searchClicked = true;
 setTimeout(() => {
   this.searchClicked = false;
 }, 150);
 // code to invoke the search
}


resetInput() {
 setTimeout(() => {
  if (!searchClicked) {
   // reset here
  }
 }, 100);
}