Open serhatgnc opened 4 days ago
Hey @serhatgnc
There's a new locale to use with the showProgress
prop. It's the nextLabelWithProgress
Let me know if that fixes your problem.
Thank you for your suggestion! Iāve already tested the nextLabelWithProgress
property as part of troubleshooting, but the issue persists even when using it. When I use locale.next
, the issue appears in the production environment with showProgress.
Switching to nextLabelWithProgress
did not resolve the problemāit still shows inconsistent behavior between development/local builds and production. The most puzzling aspect is that the label format changes in production (Next (Step 1 of 5)
vs. Sonraki (1/5)
in development/local). This suggests something is interfering with how locale properties are processed during production builds.
Let me know if thereās anything else I should check or debug further
With code block below this is how it looks like in the both environments
Production
Local
Even the format is not being taken into account.
<Joyride
steps={steps}
run={runTour}
continuous
showSkipButton
showProgress
disableCloseOnEsc
disableOverlayClose
hideCloseButton
disableScrollParentFix={true}
spotlightPadding={spacing._00}
callback={handleJoyrideCallback}
locale={{
back: t("general.button.back"),
close: t("general.button.close"),
last: t("general.button.ok"),
next: t("general.button.next"),
skip: t("general.button.skip"),
nextLabelWithProgress: (
stepIndex: number,
totalSteps: number
): string => {
return `(${stepIndex + 1} / ${totalSteps}) - ${t("general.button.next")}`;
},
}}
/>
Hey @serhatgnc
Just set a string instead of a function to the nextLabelWithProgress
: ({step} / {steps}) - ${{t("general.button.next")}
.
Hello @gilbarbara ,
I was caught off guard with this change. Use of nextLabelWithProgress
should have been optional or given in the breaking change version release. Production tests broke down.
Is there a way to keep the old behavior?
PS: This is really good change and I am sure I will use it in the next onboarding tour. Thanks for adding this props. Though, this change disrupts ongoing tours.
š Bug Report
There is an inconsistency in the
locale
configuration behavior forreact-joyride
. While thenext
label works correctly in development and local production environments (e.g.,Sonraki (1/5)
), in the production environment deployed on our servers, the label changes toNext (Step 1 of 5)
.This happens even though:
react-joyride
.last
andskip
work correctly.The most unusual part is that the label format changes (
(Step 1 of 5)
vs.(1/5)
)To Reproduce
Steps to reproduce the behavior:
In development or local production mode:
Sonraki (1/5)
In deployed production:
Next (Step 1 of 5)
Expected behavior
The label for the "Next" button should remain consistent across all environments. In all cases, it should display
Sonraki (1/5)
in Turkish.Link to repl or repo (highly encouraged)
Unfortunately, I cannot provide a public link to reproduce the issue, as this is part of a private company project. However, I can assist with further debugging information if needed.
Run
npx envinfo --system --binaries --npmPackages react-joyride
Paste the results here:
System: OS: Windows 11 10.0.22631 CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor Memory: 17.53 GB / 31.91 GB Binaries: Node: 20.14.0 - C:\Program Files\nodejs\node.EXE npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD pnpm: 9.5.0 - ~\AppData\Roaming\npm\pnpm.CMD npmPackages: react-joyride: ^2.9.2 => 2.9.2