BUG: verifica comportamento lingua selezionata su it-language-switcher

[stefanozanelliunitn]

Comportamento atteso

La lingua marcata come selezionata nella dropdown dovrebbe corrispondere alla lingua corrente

Comportamento attuale

La lingua selezionata, sul cambio lingua (anche consecutivo), non corrisponde a quella scelta

Possibili soluzioni

E' possibile che sia dovuto all'introduzione della ChangeDetectionStrategy.OnPush? Forse è sufficiente triggerare la variazione della'UI tramite ChangeDetectorRef la change detection su traslateService.OnLangChange

[stefanozanelliunitn]

Il problema sembra essere collegato alla change detection dell'oggetto it-link nell'applicazione delle classi: https://github.com/italia/design-angular-kit/blob/f0c1c3613a45a38bdd2b0f24d8ca57e98269a802/projects/design-angular-kit/src/lib/components/core/link/link.component.ts#L8 Rimuovendo la ChangeDetectionStrategy.OnPush da it-link lo switch di lingua sul componente it-language-switcher sembra comportarsi correttamente.

[AntoninoBonanno]

@stefanozanelliunitn Purtroppo non riesco a replicare il bug, la dropdown mi segna correttamente la lingua selezionata.

Mi puoi dare altre indicazioni per riuscire a replicare il problema? Hai provato a clonare il progetto e provare il language-selector dalla documentazione?

Ho provato anche ad aggiungere un'altra lingua (di cui non esiste il json) in questo caso la lingua nella dropdown non è cambiata perchè effettivamente il file non viene trovato. Aggiungendo il json la selezione funziona correttamente

[stefanozanelliunitn]

Ho provato ovviamente a clonare il progetto e riscontro il problema segnalato. In realtà lo noto anche qui: Design Angular Kit - language-switcher Utilizzando il componente di switch della lingua, una volta effettuato il cambio lingua, la voce della dropdown non viene evidenziata: non intendo la lingua visibile immediatamente dopo lo switch, ma quella presente nella dropdown-item. Dovrebbe venire applicata una classe active che però non si attiva correttamente: sembra essere legata alla change detection del campo it-link.

[AntoninoBonanno]

@stefanozanelliunitn Quale browser usi? Non riscontro il problema neanche nel link che mi hai indicato, ho provato sia su chrome che su firefox.

[AntoninoBonanno]

@cri99 potrei levare il ChangeDetectionStrategy.OnPush anche se credo che la soluzione migliore sia capire dov'è il problema e usare il changeDetectorRef per aggiornare l'interfaccia, ma non riuscendo a riscontrare il problema non posso procedere per questa strada.

Tu che ne pensi?

[stefanozanelliunitn]

Ho provato sia su Mac (Chrome e Safari) che Windows (Chrome e Firefox). Mi pare che nel tuo secondo esempio si noti: switch su ENG, lingua selezionata correttamente, dropdown item evidenzia Ita come elemento selezionato nella dropdown. Magari è un falso problema...

[AntoninoBonanno]

Non mi sembra.

@stefanozanelliunitn Invece di rimuovere l'ChangeDetectionStrategy.OnPush da it-link verifica se aggiungendo questo codice

constructor(
    private readonly translateService: TranslateService,
    private readonly changeDetectorRef: ChangeDetectorRef
  ) {
    this.currentLang$ = translateService.onLangChange.pipe(
      startWith({ lang: translateService.currentLang }),
      map(event => this.availableLanguages?.find(l => l.code === event.lang)),
      tap(() => this.changeDetectorRef.detectChanges())
    );
  }

al it-language-switcher riscontri il problema.

https://github.com/italia/design-angular-kit/blob/f0c1c3613a45a38bdd2b0f24d8ca57e98269a802/projects/design-angular-kit/src/lib/components/utils/language-switcher/language-switcher.component.ts#L21-L28

[stefanozanelliunitn]

Prima di procedere ho chiesto anche ad altri colleghi la verifica tramite la soluzione su Vercel: https://design-angular-kit.vercel.app/design-angular-kit#/componenti/language-switcher ed hanno notato lo stesso glitch. La voce dropdown-item corrispondente alla lingua selezionata non è evidenziata (sottolineata). Quindi non capisco se è questione di browser o altro.

Comunque sia ho provato come prima opzione proprio la modifica da te proposta, ma senza grossi risultati. Non scatta, a livello di UI, il toggle della classe active applicata (o meno) di it-link.

Ho trovato una soluzione, che nella mia condizione, sembra funzionare per le variazioni dell'attributo class sul componente it-link: export class LinkComponent extends AbstractComponent implements AfterViewInit { implementando OnChanges: export class LinkComponent extends AbstractComponent implements AfterViewInit, OnChanges {

override ngOnChanges(changes: SimpleChanges): void {
    if (changes['class']) {
      this._changeDetectorRef.markForCheck();
    }
  }

Cosa ne pensate? Grazie

[AntoninoBonanno]

Credo di aver capito solo adesso qual era il problema a cui ti riferivi. Scusa 😅

Si è un ottima soluzione. Aggiunta alla PR #251

[stefanozanelliunitn]

Mi sarò spiegato sicuramente male 😄...

Grazie per il supporto!

[AntoninoBonanno]

Bug corretto con il merge della PR #253