search

cybersemics / em

A beautiful, minimalistic note-taking app for personal sensemaking.
Other
282 stars 107 forks source link

Tutorial: Old tutorial steps accumulate at the bottom of the tutorial #2087

Closed raineorshine closed 2 months ago

raineorshine commented 3 months ago

Steps to Reproduce

  1. Clear site data or open em in an incognito window.
  2. Click START TUTORIAL.
  3. Click the Next button.

Current Behavior

The text from the first tutorial step shows up at the end of the second tutorial step. Previous tutorial steps continue to accumulate after each step.

After Step 1:

Brave Browser 2024-06-29 13 28 48

After Step 2:

Brave Browser 2024-06-29 13 41 46

Expected Behavior

Only the text for the current tutorial step should be shown.

After Step 1:

image

Note

This may be a regression from the upgrade to Vite a couple months ago. Something appears to be broken with the use of CSSTransition: https://github.com/cybersemics/em/blob/ee9b4ba13adb79d96da52cd4c1eb13e51b4d5aa4/src/components/Tutorial/index.tsx#L39-L51.

michaelperros commented 2 months ago

Hi @raineorshine

I created pull request #2189 to fix this issue.

The issue was caused by the key prop being a special property in React that isn't passed down to child components. I resolved this by renaming the key prop to transitionKey to ensure it is properly passed and used in the CSSTransition component. Now React can keep track of each element that is being mapped and no longer accumulates the tutorial messages.

Please let me know if there are any questions or if further adjustments are needed.