Discussion :

[olivier252]

Hello,

Petit problème du lundi ! Mon appli utilise un stepper material que j'ai factorisé pour pouvoir l'appeler dans plusieurs compos.
Je souhaite que le focus du 1er champ de ce stepper soit activé par défaut. J'ai fait quelque chose comme ceci qui fonctionne, mais uniquement au lancement de l'appli ou quand je rafraichis.
Dès lors que je me promène dans l'appli et que je vais sur les pages qui utilisent ce stepper, je perds ce focus.
Voici le code du stepper en question :

html (je ne mets que le 1er champ pour alléger)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<mat-vertical-stepper class="vertical-stepper" [linear]="isLinear" #stepper (selectionChange)="onChange($event)">
      <mat-step [stepControl]="firstFormGroup" label="Scannez une référence">
        <form [formGroup]="firstFormGroup">
          <ng-template matStepLabel>{{ 'ZONE.CODE_BARRE_REF' | translate }}</ng-template>
          <div class="flexInput">
            <mat-form-field appearance="outline" class="mat-form-zone">
              <input matInput id="input0" autocomplete="off" formControlName="reference"
                placeholder="{{ 'ZONE.CODE_BARRE_REF_PLACEHOLDER' | translate }}" required>
            </mat-form-field>
              <button mat-mini-fab color="primary" (click)="onCheckRef()" matStepperNext aria-label="">
                <mat-icon>done</mat-icon>
              </button>
          </div>
        </form>
      </mat-step>

et le ts :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
--------------------------------------------------------
  @ViewChild('stepper') stepper: MatStepper;
 
  constructor(private formBuilder: FormBuilder,
    private rayonService: SharedRayonService) {
  }
 
  ngOnInit() {
    this.initStepperForm();
  }
 
  ngAfterViewInit() {
    this.setFocus();
  }
 
  onChange(event) {
    let index = String(event.selectedIndex);
    this.targetInput = 'input' + index;
    if (index === "0") this.rayonService.isDisplayProductSubject.next(false);
    else if (index === "1") this.rayonService.isDisplayProductSubject.next(true);
    this.setFocus();
  }
 
  setFocus() {
    let targetCurrentInput = document.getElementById(this.targetInput);
    console.log(targetCurrentInput);
    setTimeout(function waitTargetElem() {
      if (document.body.contains(targetCurrentInput)) {
        targetCurrentInput.focus();
      } else {
        setTimeout(waitTargetElem, 100);
      }
    }, 100);
  }
---------------------------------------------

Je crois comprendre ce qui se passe, mais je vais peut-être dire une grosse c.....

Au lancement de l'appli l'instance du stepper est créée dès lors que je vais sur une page qui l'utilise, du coup quand je vais sur une autre page qui utilisse le stepper, ngAfterviewInit ne se lance plus et le comportement voulu disparait.
J'ai essayé un truc vraiment sale comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
methodTruc() {
  this.ngAfterViewInit();
}

Et j'appelle methodeTruc() ! Du coup ça me lance des erreurs de recursivité mais ça fonctionnait...une fois sur deux lol.

Comment faire pour récupérer le focus ? Merci...

[krakatoa]

si tu peux mettre ça sur stackblitz dans 2 composants
histoire de reproduire le problème

[olivier252]

Yop, je vais essayer de faire ça, je reviendrai ds quelques temps

[olivier252]

Bon, je fais suite sans stackblitz, il faudra un jour que j'aprenne à m'en servir, j'ai galéré pour intégrer les dépendances de material...Du coup j'ai quand même trouvé une solution à mon problème qui est d'avoir un focus d'activé sur certains champs d'un stepper, j'ai créé une directive custom toute simple omme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
import { Directive, ElementRef, OnInit } from '@angular/core';
 
@Directive({
  selector: '[appFocus]'
})
export class FocusDirective implements OnInit {
  constructor(private el: ElementRef) { }
 
  ngOnInit() {
 
     this.el.nativeElement.focus();
  }
}

Et ça fonctionne nickel