Skip to content

fix(language-switcher): initialize currentLang$ after availableLanguages is resolved#674

Open
giulio-leone wants to merge 1 commit into
italia:mainfrom
giulio-leone:fix/596-language-switcher-init
Open

fix(language-switcher): initialize currentLang$ after availableLanguages is resolved#674
giulio-leone wants to merge 1 commit into
italia:mainfrom
giulio-leone:fix/596-language-switcher-init

Conversation

@giulio-leone

Copy link
Copy Markdown
Contributor

What

Closes #596 — Fixes both the logical and graphical problems with <it-language-switcher>.

Logical fix

The currentLang$ observable was created in the constructor, before availableLanguages was resolved in ngOnInit(). The startWith → map pipeline's first emission ran this.availableLanguages?.find(...) against undefined, always returning undefined and permanently showing the fallback text "Seleziona una lingua".

Fix: Move observable initialization into ngOnInit(), after availableLanguages is populated. The component now correctly shows the current language label (e.g. "ITA", "ENG") from the first render.

Graphical fix (positioning)

The dropdown positioning issue was a side effect: the longer fallback string caused the button to be wider than the final label, leading to a miscalculated dropdown position. With the correct label rendered from the first paint, the dropdown positions correctly.

How

- protected currentLang$: Observable<AvailableLanguage | undefined>;

- constructor() {
-   this.currentLang$ = this.translateService.onLangChange.pipe(...);
- }

  ngOnInit(): void {
    // ... availableLanguages resolution (unchanged) ...

+   this.currentLang$ = this.translateService.onLangChange.pipe(
+     startWith({ lang: this.translateService.getCurrentLang() }),
+     map(event => this.availableLanguages?.find(l => l.code === event.lang))
+   );
  }

Tests

  • 115/115 tests pass (0 lint errors)
  • 7 new tests covering:
    • Default language shown on init (ITA, ENG)
    • availableLanguages auto-resolved from TranslateService
    • Custom availableLanguages input + TranslateService registration
    • Language switching updates displayed label
    • Dropdown items rendered correctly

Migration

None — fully backward compatible.

⚠️ This reopens #630 which was accidentally closed due to fork deletion.

…ges is resolved

Move the `currentLang$` observable initialization from the constructor
to `ngOnInit()` so it runs after `availableLanguages` is resolved.

Previously, the `startWith` + `map` pipeline was created in the
constructor when `availableLanguages` was still `undefined`, causing
the initial emission to always map to `undefined` and the template to
permanently show the fallback text 'Seleziona una lingua'.

This also fixes the dropdown positioning issue reported in the same
ticket: the correct (shorter) label is now rendered from the first
paint, so the dropdown calculates its position based on the final
button width rather than the longer fallback string.

Closes italia#596

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Il componente <it-language-switcher> ha alcuni problemi

1 participant