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

Resizing the window during the tutorial leaves its demonstration session active as a real session

Open Beginner friendly
  • Is something wrong?
#1,765 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
85/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start with apps/web/src/providers/WalkthroughProvider.tsx and the existing walkthrough tests in apps/web/src/providers/__tests__/WalkthroughProvider.test.tsx; trace how the demonstration session starts and how resize or unmount closes the walkthrough. Run the two described tests, then verify dismissing the walkthrough by either route leaves no tutorial session active. The issue also names a new end-to-end spec at testing/src/specs/walkthrough.spec.ts.

Written by the indexing model from the issue text.

Description

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

If the tutorial is dismissed by resizing the window, its demonstration session (subject 123, session 123) stays in the store as a real session in progress. At the "Session in Progress" step the walkthrough calls startSession(SESSION_DATA) to have something to point at, and only its close() handler calls endSession() to undo that. Resizing the window closes the walkthrough through a different path: a resize listener that only sets isWalkthroughOpen to false. Shrinking below the desktop breakpoint does the same, because WalkthroughProvider stops rendering the walkthrough. In both cases close() never runs. A first-time user who maximizes or snaps the browser window part-way through the tutorial is left with a "session in progress" for a subject that does not exist. "Start Session" is disabled, and "Accessible Instruments" opens instruments against session id 123, which the API cannot accept when the record is saved.

Where

apps/web/src/providers/WalkthroughProvider.tsx:68:

useEventListener('resize', () => setIsWalkthroughOpen(false), undefined, { once: true });

apps/web/src/providers/WalkthroughProvider.tsx:286-288 (the fake session) and :416-421 (the only cleanup):

onBeforeQuery() {
  startSession(SESSION_DATA);
},
// ...
const close = () => {
  endSession();
  removeSpotlight();
  setIndex(0);
  setIsWalkthroughOpen(false);
};

Reproduce

  1. Sign in with a browser window that is not maximized, accept the disclaimer, and let the tutorial open (or open it from the user menu → Tutorial).
  2. Click Next until the "Session in Progress" step.
  3. Resize or maximize the window.

Actual: the tutorial disappears, but the sidebar still shows a current session for subject 123. Start Session is disabled until the user ends that session by hand.
Expected: dismissing the tutorial by any route removes its demonstration session, as the close button does.

Tests

  • apps/web/src/providers/__tests__/WalkthroughProvider.test.tsx: it('should end the demonstration session when a resize closes the walkthrough'), plus it('should end the demonstration session when the walkthrough unmounts below the desktop breakpoint').
  • testing/src/specs/walkthrough.spec.ts (new): open the tutorial from the user menu, advance past "Session in Progress", resize the viewport, and assert no current session card is shown.

Suggested fix

Do the cleanup on unmount rather than only in close(): e.g. a useEffect(() => () => endSession(), []) in Walkthrough, guarded so it only ends the session when the current session is the tutorial's SESSION_DATA. Alternatively, have the resize listener call close().

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.