Currently working with Angular 9 and Material, we have implemented a Stepper to assist users in navigating through our workflow steps. Our goal is to enable users to go through these steps using only the keyboard, without relying on mouse clicks for control navigation.
We have explored various examples of setting focus on controls via click events, but want to avoid requiring users to click a button to set initial focus on the first text area. Is there a way to achieve this automatically when the stepper is initialized? We attempted using element reference in ngAfterViewInit, but it did not produce the desired outcome. Any insights or guidance on how to accomplish this would be greatly appreciated. Thank you.
Below is the relevant HTML code:
<pseudo-common-tool-header title="{{this.title}}"></pseudo-common-tool-header>
<div class="pseudo-content-manager-tool-area">
<mat-horizontal-stepper #stepper>
<mat-step [stepControl]="formGroup">
<form [formGroup]="formGroup">
<ng-template matStepLabel>Workstation Ids</ng-template>
<div>
<mat-form-field appearance="outline" class="eris-width-45" > ;
<mat-label>List of Old/New Workstations to swap (one pair per line)</mat-label>
<textarea #wkstns rows="8" #workstations matInput placeholder="Old Workstation, New Workstation" formControlName="workstations" required></textarea>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="outline" >
<mat-label>Soft Delete Date</mat-label>
<input matInput #softDate [min]="minDate" [matDatepicker]="picker3" formControlName="removalDate">
<mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
<mat-datepicker #picker3 color="primary"></mat-datepicker>
</mat-form-field>
</div>
<div>
<button color="primary" #step1next mat-raised-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step label="Validate">
<div>
<button mat-raised-button color="secondary" matStepperPrevious>Back</button>
<button mat-raised-button color="secondary" matStepperNext>Next</button>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Epic Build</ng-template>
</mat-step>
And here is the corresponding Component code snippet:
@Component({
templateUrl: './swap-workstations.component.html',
styleUrls: ['./swap-workstations.component.scss']
})
@PseudoTool({
title: 'Check Workstation Existence in Epic',
componentName: 'CheckWorkstationExistenceInEpicComponent'
})
export class SwapWorkstationsComponent extends BasePseudoTool implements OnInit {
formGroup: FormGroup;
// minimum date for date picker
minDate: Date;
@ViewChild('wkstns') wkstns: ElementRef;
@ViewChild('softDate') softDate: ElementRef;
@ViewChild('step1next') step1next: ElementRef;
constructor(private formBuilder: FormBuilder) {
super();
}
ngOnInit(): void {
this.formGroup = this.formBuilder.group({
workstations: ['', Validators.required],
removalDate: ['', Validators.required]
});
// Set minimum date for date pickers.
this.minDate = new Date();
}
ngViewAfterInit(): void {
this.wkstns.nativeElement.focus();
}
}