Angular: Предотвратить размытие поля ввода при нажатии кнопки

Question

Итак, у меня есть поле ввода для текстового поиска. Его можно вызвать, нажав клавишу ввода или нажав кнопку. Теперь я хотел бы добавить функцию, что если вы наберете «AB C», нажмете ввод, запускается, а затем поиск; а затем, когда вы добавляете пару символов (например, «123», чтобы получить «ABC123»), но оставляете поле ввода, не нажимая Enter, я хотел бы вернуть содержимое поля ввода обратно к «AB C» , чтобы показать пользователю, что это был последний поисковый запрос.

Я реализовал это с помощью (blur) = "resetInput ()" для ввода текста, однако проблема в том, что если пользователь нажимает кнопку (после добавления «123» к «AB C») также сработает размытие, в результате чего ввод будет сброшен (до «AB C»), а затем будет выполнен поиск (с «AB * 1012» * "вместо" ABC123 ").

Я читал, что это связано с порядком, в котором выполняются щелчки и размытие, и что вы можете обойти это, используя mousedown вместо щелчка по кнопке , но это изменит поведение страницы, потому что поиск будет выполняться при опускании мыши, а не при подведении курсора мыши (что происходит, если вы используете событие (щелчок))

Есть ли альтернатива этому ?

Answer 1

Это может быть обходным решением, если вы можете иметь очень короткую задержку при сбросе значения при размытии.

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

Answer 2

Спасибо всем за ваши ответы, я решил это сейчас, вызвав event.preventDefault () для mouseDown, который заблокирует событие размытия и позволит выполнить событие (щелчок) с неизмененным входным текстом.