Angular - Press enter on table column starts automatically button click

Question

In my Angular 9 project, I've a table in my HTML where I've defined, dinamycall, 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);
  }

question from:https://stackoverflow.com/questions/66059767/angular-press-enter-on-table-column-starts-automatically-button-click

Answer 1

I would try adding type="button" to the button (I remember many a bug where the unexpected form behavior came from button being by default of type "submit").