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

Switching instruments in the playground silently discards unsaved edits

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

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
75/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start with apps/playground/src/store/slices/instrument.slice.ts and its tests in apps/playground/src/store/slices/__tests__/instrument.slice.test.ts; trace how editor files differ from the selected instrument. Then inspect apps/playground/src/components/Header/InstrumentSelector/InstrumentSelector.tsx and the E2E coverage in testing/src/specs/playground.spec.ts. Done means switching or reloading with unsaved edits prompts appropriately, and canceling a switch preserves the edit.

Written by the indexing model from the issue text.

Description

Area: Playground Difficulty: Medium Enhancement Priority: Medium

Switching instruments in the playground silently discards unsaved edits. setSelectedInstrument replaces files with the chosen instrument's stored files, and nothing checks for unsaved changes first. The instrument selector, share-link import and Upload Archive all switch this way, and there is no beforeunload guard for reloads. The playground opens on the Unilingual Form template, which cannot be saved. A user who builds an instrument there and then opens an example to look something up loses all of that work with no warning. Unsaved edits to a saved instrument are reverted the same way. The app already tracks this state: the Save button is enabled exactly when a saved instrument has unsaved changes.

Where

apps/playground/src/store/slices/instrument.slice.ts:37-51:

setSelectedInstrument: (id) => {
  set((state) => {
    const instrument = state.instruments.find((item) => item.id === id);
    // ...
    state.selectedInstrument = instrument;
    state.files = instrument.files;

apps/playground/src/components/Header/InstrumentSelector/InstrumentSelector.tsx:53-56:

onSelect={(id) => {
  setSelectedInstrument(id);
  setOpen(false);
}}

Reproduce

  1. Open the playground (Unilingual Form is selected) and make several changes to index.ts.
  2. Select Form Reference in the instrument selector, then select Unilingual Form again.

Actual: the changes are gone, and no warning was shown.
Expected: before discarding, the playground asks whether to keep editing, save (for a saved instrument), create a new instrument from the edits, or discard them. It shows the same browser prompt on reload while there are unsaved edits.

Tests

apps/playground/src/store/slices/__tests__/instrument.slice.test.ts: it('should report unsaved changes when the editor files differ from the selected instrument, so switching can ask before discarding them'), for a new hasUnsavedChanges selector that the Save button and the confirmation share.

E2E in testing/src/specs/playground.spec.ts: edit index.ts, pick another instrument, assert that the confirmation appears, cancel it, and assert that the edit is still in the editor.

Suggested fix

Add a hasUnsavedChanges selector (editor files differ from selectedInstrument.files). Route every instrument switch through a confirmation dialog when it is true, offering Create New Instrument for examples and templates and Save for saved instruments. Register a beforeunload handler while it is true.

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.