So, I have an input field for a text search. It can be triggered by pressing enter or clicking a button. Now I'd like to add the feature that if you type "ABC", press enter, it triggers then search; and then when you add a couple of characters (e.g. "123" so you get "ABC123") but leave the input field without pressing enter, I'd like to revert the content of the input field back to "ABC", to show the user that that was the last search term.

I've implemented that with (blur)="resetInput()" on the text input, however the problem is that if the user clicks the button (after adding "123" to "ABC"), blur will trigger as well, which causes the input to get reset (to "ABC") and then the search gets executed afterwards (with "ABC" instead of "ABC123").

I've read that this is due to the order of which click and blur are being executed, and that you could circumvent that by using mousedown instead of click on the button, but that would change the behavior of the page, because the search would get executed on mouse down instead of mouse up (which is what happens if you use the (click) event)

Is there an alternative to this?

So, I have an input field for a text search. It can be triggered by pressing enter or clicking a button. Now I'd like to add the feature that if you type "ABC", press enter, it triggers then search; and then when you add a couple of characters (e.g. "123" so you get "ABC123") but leave the input field without pressing enter, I'd like to revert the content of the input field back to "ABC", to show the user that that was the last search term.

I've implemented that with (blur)="resetInput()" on the text input, however the problem is that if the user clicks the button (after adding "123" to "ABC"), blur will trigger as well, which causes the input to get reset (to "ABC") and then the search gets executed afterwards (with "ABC" instead of "ABC123").

I've read that this is due to the order of which click and blur are being executed, and that you could circumvent that by using mousedown instead of click on the button, but that would change the behavior of the page, because the search would get executed on mouse down instead of mouse up (which is what happens if you use the (click) event)

Is there an alternative to this?

• javascript
• angular
• typescript

• add your code which you tried @jake-castle – Avinash Dalvi Commented Jun 18, 2020 at 9:17
• 1 try to use (change)="resetInput()" – Mahmoudi MohamedAmine Commented Jun 18, 2020 at 9:21

3 Answers 3

Thank you all for your answers, I have solved it now by calling event.preventDefault() on mouseDown which will block the blur event and allow the (click) event being executed with the unchanged input text.

This could be a work around if you are fine to have a very short delay in resetting the value on blur.

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);
}

I have also faced this issue on my Angular application. Solution is simple: I have declared a variable. When the mouse is over on the button, The variable will be assigned to true, Otherwise false. Then I have run the blur method according to the value of variable.

html
<input (blur)="handleBlur()" 
       (mouseover)="ignoreBlur=true" 
       (mouseleave)="ignoreBlur=false" />
<button (click)="handleClick()"></button>

ts
handleBlur() {
   if (this.ignoreBlur) {
      this.ignoreBlur = false;
      return;
   }
   // do smth
}

handleClick() {
   // do smth
}