How to open angular modal on focus reactive form text field?

Question

I need to open angular (Ngbmodal) modal when focus on a read-only text field. But when I do, it opens the modal but shows an error in the console and unable to close the modal.

Error:

Text Field :

<input type="text" [readonly]="true" placeholder="Please select a user" (focus)="openUserSelectModal()" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />

Modal open function:

ngOnInit() {
this.basicAccountForm = this.formBuilder.group({
  username: ['', Validators.required],
});

}

openUserSelectModal() {
const modal = this.modalService.open(UserSelectorComponent, { size: 'sm', container: 'nb-layout' });

modal.result.then((username) => {
  if (username) {
    this.basicAccountForm.controls['username'].setValue(username);
  }
}, () => {
  this.basicAccountForm.controls['username'].setValue(null);
});
 }

Stackblitz Editor Link

Answer 1

To fix this use event.PreventDefault Html

<input type="text" [readonly]="true" placeholder="Please select a user" (focus)="openModal($event)" formControlName="username" class="form-control"/>

TS

 openModal(event) {
    event.srcElement.blur();
  event.preventDefault();
    const userModal = this.modalService.open(UserComponent, { size: 'sm' });
  }

Forked Example: https://stackblitz.com/edit/angular-4md9fd