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

I have this piece of code for search field:

<form  role="search">
    <div >
      <div >
        <input name="searchItem" #searchInput="ngModel" ngModel
          (ngModelChange)="searchUserShowCpv(searchInput.value)"  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?

CodePudding user response：

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)"  type="search"
        placeholder="Search" aria-label="Search">
    </div>