Skip to content

fix: locale dropdown resets to English after page refresh#48094

Open
vipurkumar wants to merge 1 commit intoopenclaw:mainfrom
vipurkumar:fix/locale-dropdown-race-condition
Open

fix: locale dropdown resets to English after page refresh#48094
vipurkumar wants to merge 1 commit intoopenclaw:mainfrom
vipurkumar:fix/locale-dropdown-race-condition

Conversation

@vipurkumar
Copy link
Copy Markdown

Summary

  • Fixes the language dropdown on the Overview page showing "English" after a page refresh, even though the UI stays correctly translated
  • Root cause: .value property binding on the <select> evaluated i18n.getLocale() before async locale translations finished loading, returning the fallback "en"
  • Fix: replace .value on <select> with ?selected attribute binding on each <option>, which Lit re-evaluates reactively when the i18n subscription triggers a re-render after translations load

Fixes #48015

AI Disclosure

  • AI-assisted (Claude Code)
  • Lightly tested (no Node.js/pnpm available in current env; change is minimal)
  • I understand what the code does

Test plan

  • Open Control UI Overview page
  • Select a non-English language (e.g. 简体中文) from the dropdown
  • Refresh the page
  • Verify the dropdown still shows the selected language (not "English")
  • Verify the UI translations are correct
  • Run pnpm test — existing tests should pass

🤖 Generated with Claude Code

Replace .value property binding on <select> with ?selected attribute
binding on each <option>. The .value binding evaluated before async
locale translations loaded, causing the dropdown to show "English"
after refresh despite the UI being correctly translated.

Fixes openclaw#48015

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Mar 16, 2026

Greptile Summary

This PR fixes a stale dropdown display bug where the language selector showed "English" after a page refresh even though the correct non-English locale was loaded and applied to the UI. The root cause is that I18nManager initializes this.locale to "en" and then fires an async setLocale() call from its constructor; any render that executes before that promise resolves captures "en" from i18n.getLocale(). The .value binding on <select> set the DOM value imperatively during that first render, locking in English before the subscriber-triggered re-render could correct it.

Changes:

  • Removes .value=${currentLocale} from the <select> element.
  • Adds ?selected=${loc === currentLocale} to each <option>, which is Lit's idiomatic boolean-attribute binding and is re-evaluated on every re-render. When the async locale load completes, notify() fires, the parent re-renders via I18nController, and the correct option is marked selected.
  • The fix is minimal (2 lines changed, 1 file) and aligns with standard Lit best practices for driving <select> state from reactive/async data.

Confidence Score: 5/5

  • This PR is safe to merge — the change is minimal, targeted, and uses the correct Lit idiom for reactive select state.
  • The fix is a two-line change that replaces an imperative .value binding with the idiomatic ?selected boolean-attribute pattern. The root cause described in the PR description matches exactly what the I18nManager source shows: locale starts as "en" and is updated asynchronously, so any render before the async load completes captures the wrong value. The ?selected binding is re-evaluated on every re-render, which correctly picks up the locale once the subscriber-triggered re-render fires. No regressions or edge cases were identified.
  • No files require special attention.

Last reviewed commit: 84833d5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Language dropdown selection on overview page resets to English after refresh

1 participant