Cfrgtkky

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

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.

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.