I have a form with multiple form fields organized in rows and columns and a delete row button at the end of each row. When the user enter a value in on the form fields if the press the Enter/Return key, instead of "entering" the value, it delete the row, as if the focus of the user was on the delete button and he'd pressed enter.
Here's a screen shot of the form:

Here is the html code for this part of the application:
<!-- Hypothesis Form -->
<form [formGroup]="hypothesesForm">
<!-- Header row -->
<div class="hypothesis-header-row">
<div class="hypothesis-header"></div>
<div *ngFor="let value of simulationHypotheses[0]; let weekNumber = index" class="form-row-header">
Week #{{weekNumber + 1}}
</div>
<div class="form-row-header">
Total
</div>
</div>
<!-- Rows -->
<div *ngFor="let hypothesis of simulationHypotheses; let rowIndex = index; let isFirstHypothesis = first;" class="form-row">
<div class="hypothesis-header">
Hypothesis {{rowIndex + 1}}:
</div>
<div class="hypothesis-cell" *ngFor="let value of hypothesis; let colIndex = index;">
<mat-form-field class="hypothesis-input" appearance="fill">
<input
matInput
number
[formControlName]="getControlNameFromIndexes(rowIndex, colIndex)"
>
</mat-form-field>
</div>
<div class="hypothesis-header">
{{sum(hypothesis)}} {{getIndicatorName()}}
</div>
<div class="remove-hypothesis-button" *ngIf="!isFirstHypothesis">
<button mat-mini-fab color="primary" aria-label="Remove Hypothesis" (click)="removeHypothesis(rowIndex)">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</form>
Any idea of what might cause this behavior and how to fix it ?
I didn't include the ts or css code but feel free to ask if you think it might be relevant.