Allow space (key) in Mat-Input inside mat-step

Question

I have added a mat-input inside the mat-step's template, so that title can be added by user.

<mat-horizontal-stepper>
    <mat-step *ngFor="let group of apprGrpList; let i = index"
        [label]="group.group_Name | capitalize"  
        [editable]="isEditable" >
        <ng-template matStepLabel>
                <mat-form-field class="sf-form-width">
                        <input class="sf-form-input"
                            matInput #title maxlength="30"
                            placeholder="Aprroval Step Title"
                            autocomplete="off">
                        <mat-hint *ngIf="title.value" 
                            align="end">{{title.value.length}} / 30</mat-hint>
                        <button mat-button *ngIf="title.value" 
                            matSuffix mat-icon-button aria-label="Clear" 
                            (click)="title.value=''">
                            <mat-icon>close</mat-icon>
                        </button>
                        <button mat-button *ngIf="title.value" 
                            matSuffix mat-icon-button aria-label="Set" 
                            (click)="setTitle(group.sequence, title.value)">
                            <mat-icon>check</mat-icon>
                        </button>                            
                </mat-form-field>  
        </ng-template>
...

below is a sample capture of what I have achieved.

Everything works fine until typing a words in mat-input does not accepts space input (spacebar keypress).

Any suggestions how to allow space key in mat-input inside mat-steps?

---

I have seen this in the documentations, is there a way to by pass SPACE event defaults?

Keyboard interaction

• LEFT_ARROW: Focuses the previous step header
• RIGHT_ARROW: Focuses the next step header
• ENTER, SPACE: Selects the step that the focus is currently on
• TAB: Focuses the next tabbable element
• TAB+SHIFT: Focuses the previous tabbable element

https://material.angular.io/components/stepper/overview

https://stackblitz.com/edit/angular-9hm4bv

Answer 1

I seems that the mat-step header's keyboard interaction propagates to matInput, I have ended up using $event.stopPropagation() on keydown event of matInput.

Here is the stackblitz:

https://stackblitz.com/edit/angular-9hm4bv

sample image:

Hope It might be helpful to others.

Answer 2

It appears that the issue is with the input field being within the ng-template.

See this example:

 <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

It starts to work as expected if you remove the input and make it a sibling of the ng-template.