How to disable input clear by ESC button, Bootstrap-5

August 17, 2022

I have this piece of code for search field:

<form class="container" role="search">
    <div class="row">
      <div class="col-12">
        <input name="searchItem" #searchInput="ngModel" ngModel
          (ngModelChange)="searchUserShowCpv(searchInput.value)" class="form-control me-2" type="search"
          placeholder="Search" aria-label="Search">
      </div>
    </div>
  </form>

The problem is that if there is some value in the field and the ESC button is pressed, the field is cleared, but the ngModelChange event for an empty field value does not fire.

How to disable field clearing when pressing Esc?

>Solution :

As mentioned in the doc. This is how input type="search" works.

You can add (keydown.escape)="$event.preventDefault()" to input element to prevent clearing on escape button click

  <input name="searchItem" #searchInput="ngModel" ngModel
      (keydown.escape)="$event.preventDefault()"
        (ngModelChange)="searchUserShowCpv(searchInput.value)" class="form-control me-2" type="search"
        placeholder="Search" aria-label="Search">
    </div>