Strange behaviour of mat-form-field when pressing Return key

  angular, angular-material

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:
enter image description here

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.

Source: Angular Material Quesions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.