Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Instrument content on record, graph and upload pages stays in the previous language after switching interface language

Open Beginner friendly
  • Is something wrong?
#1,770 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend, internationalization

Research direction

Start with apps/web/src/hooks/useInstrument.ts:16-29 and the useInstrument test at apps/web/src/hooks/__tests__/useInstrument.test.ts; check how the hook interprets the bundle and responds to resolvedLanguage. Run the hook test, then verify the language-switch case in testing/src/specs/subject-detail.spec.ts. Done when instrument content updates to the selected language without leaving and reopening the page.

Written by the indexing model from the issue text.

Description

Area: Web Bug Difficulty: Low Good First Issue Priority: Low

useInstrument translates the instrument once, in whatever language is active when its bundle loads, and never again. So pages built on it keep showing the instrument's title, field labels and measure labels in the old language after the user switches interface language. The effect calls translateInstrument(instrument, resolvedLanguage) but lists only instrumentBundleQuery.data as a dependency. A language change keeps the cached bundle, so the effect does not re-run. The rest of each page switches language, and the instrument-derived parts do not:

  • the record view (/datahub/subjects/$subjectId/table/$recordId, InstrumentSummary): title, question labels and measure labels;
  • the subject graph: the measure picker (useMeasureOptions), while the instrument picker next to it, fed by the language-keyed useInstrumentInfoQuery, switches;
  • the upload page heading ("Upload Data For <title>");
  • the instrument title in the assignment details sheet on the subject's Assignments tab.

Where

apps/web/src/hooks/useInstrument.ts:16-29:

useEffect(() => {
  if (instrumentBundleQuery.data) {
    const { bundle, id } = instrumentBundleQuery.data;
    interpreter
      .interpret(bundle, { id, validate: import.meta.env.DEV })
      .then((instrument) => setInstrument(translateInstrument(instrument, resolvedLanguage)))
      // ...
  }
}, [instrumentBundleQuery.data]);

Reproduce

  1. With the interface in English, open a subject's record for a bilingual (English/French) form instrument.
  2. Switch the interface language to French.

Actual: the navigation and page chrome switch to French, but the record's title, questions and measures stay in English until the page is left and reopened.
Expected: the instrument content switches to French along with the rest of the page.

Tests

apps/web/src/hooks/__tests__/useInstrument.test.ts: it('should retranslate the loaded instrument when the interface language changes'). Rerender with a different mocked resolvedLanguage and assert translateInstrument is called with the new language.

testing/src/specs/subject-detail.spec.ts: open a record, switch the language toggle, and assert the record title is shown in the new language.

Suggested fix

Keep the interpreted (multilingual) instrument in state, and derive the translated one with useMemo(() => instrument && translateInstrument(instrument, resolvedLanguage), [instrument, resolvedLanguage]). That way a language change only re-translates and does not re-interpret the bundle.

Dominant language
TypeScript
Stars
119
Forks
19
Avg merge
1d 2h
Merged PRs (30d)
56

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from DouglasNeuroInformatics/OpenDataCapture

All issues in DouglasNeuroInformatics/OpenDataCapture

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.