Angular - Press enter on table column starts automatically button click

In my Angular 9 project, I've a table in my HTML where I've defined, dynamicall, rows and columns.

Some of these columns are editable. After I've edited my value, I press ENTER but instead to apply my edit, starts automatically, click event associated to button presents in another column of my table.

How can I prevent this behaviour?

This is my code:

HTML

<table class="table table-striped" aria-describedby="page-heading">
<thead>
<tr>
<th *ngIf="showIndex"> </th>
<th *ngIf="IsCheckable">Seleziona</th>
<th *ngFor="let label of displayColumnsLabel">{{label}}</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows; index as rowIndex" [formGroup]="formArray?.controls[rowIndex]"
[selectRow]="instance" (onSelectedEntity)="onSelectedRowListener($event, row, rowIndex)">

<td *ngIf="showIndex">
{{rowIndex+1}}
</td>
<td *ngIf="IsCheckable"><input type="checkbox" (click)="checkElement(row,rowIndex)"
[disabled]="row['checkDisabled']" [checked]="selectedDatamapContainsElement(row)"></td>
<td *ngFor="let columnName of displayColumns">
<ng-template #colonna let-elem let-toggle="toggle">
<div *ngIf="toggle && templatesColumns[columnName];then editTemplate; else defaultContent">
</div>
<ng-template #editTemplate>
<ng-template #suggestionSsl>
<dm-suggestion-single-lookup #suggestionSingle
[controlName]="templatesColumns[columnName]['formControl']"
[fieldList]="templatesColumns[columnName]['fieldList'] || 'codice'"
[filteredData]="templatesColumns[columnName]['filteredData']"
[filterMethod]="templatesColumns[columnName]['filterMethod']"
(onFocus)="toggle = true" (mouseOutClick)="toggle = false"
(onSelect)="onSelectSuggestion(formArray?.controls[rowIndex], rowIndex)"
[openModalLookupMethod]="templatesColumns[columnName]['openModal']">
</dm-suggestion-single-lookup>
</ng-template>
<ng-template #string>
<input type="number"
(blur)="onChangeInputText(formArray?.controls[rowIndex], rowIndex, $event);toggle = false"
[formControlName]="templatesColumns[columnName]['formControl']">
</ng-template>
<ng-template #number>
<input type="number"
(blur)="onChangeInputText(formArray?.controls[rowIndex], rowIndex, $event);toggle = false"
[formControlName]="templatesColumns[columnName]['formControl']">
</ng-template>
<div
*dmInputType="formArray?.controls[rowIndex]?.get([templatesColumns[columnName]['formControl']])?.value; then suggestionSsl;else string; last number">
</div>
</ng-template>
<ng-template #defaultContent>
<div *ngIf="templatesColumns[columnName]; else other" (click)="toggle = true;">
{{formArray?.controls[rowIndex]?.get([templatesColumns[columnName]['formControl']])?.value
|formObject:templatesColumns:columnName}}
</div>
<ng-template #other>
<div *ngIf="elem === true || elem === false; else soloTesto">
<input type="checkbox" [checked]="elem" [attr.disabled]="true">
</div>
<ng-template #soloTesto>
{{elem}}
</ng-template>
</ng-template>
</ng-template>
</ng-template>

<ng-container *ngTemplateOutlet="colonna; context:{$implicit:row[columnName], toggle:false }">
</ng-container>
</td>
<td>
<button *ngIf="deleteRowVisible" name="btnDelete" id="btnDelete" (click)="deleteRowTest(rowIndex,'btnDeleteEvent');toggle=false"
class="btn btn-danger btn-sm ng-star-inserted">
<fa-icon [icon]="'times'"></fa-icon>
</button>
</td>
<td>
<button *ngIf="viewRowVisible" (click)="viewDeatil(rowIndex)" class="btn btn-primary btn-sm">
<fa-icon [icon]="'eye'"></fa-icon>
</button>
</td>
</tr>
</tbody>
</table>


This is the button:

<td>
<button *ngIf="viewRowVisible" (click)="viewDeatil(rowIndex)" class="btn btn-primary btn-sm">
<fa-icon [icon]="'eye'"></fa-icon>
</button>
</td>


TypeScript class (snippet):

deleteRowTest(rowIndex: number,event:String) {
this.rows.splice(rowIndex, 1);
this.rowDeleted.emit(rowIndex);
}

Continue reading...