Unable to enter text after selecting the already text in search bar

I applied some regex on input for restricting input value. rule of input is user cannot type more than 3 characters in input field but when user typed three characters in input so when selecting all characters it not allowing to type again after selecting whole typed text. as you can see in stackblitz example which I created. here it is what I tried

typescript code

@ViewChild("searchText", { static: true }) public searchText: ElementRef;
  AAA = /^[a-zA-Z]{0,3}$/g;
  flight = /^[0-9]{0,4}$/g

  public validateFlightConnectionRules(e) {
    let searchTextLen = this.searchText.nativeElement.value.length;
    const val = ((this.searchText.nativeElement.value.match(this.flight) && (searchTextLen < 4)) || e.key === "Backspace")
    || (this.searchText.nativeElement.value.match(this.AAA) && (searchTextLen < 3));
    return val;
  }

html code

<input #searchText
type="text" class="text-line form-control clr-input-text" (keydown)="validateFlightConnectionRules($event)"/>

also I need apply any special character validation through regex. any help would be appreciated.