stepIndex values differ between Windows and Apple-based devices at the end of the tour.

hiroshinishio commented 1 year ago

Describe the bug

stepIndex values differ between Windows and Apple-based devices at the end of the tour. So I had to do this workaround.

  const onExit = async (stepIndex: number) => {
    // It should be compared to steps.length -1, but at least in Windows, there is a weird quirk in the way the library counts indexes, so when there are n steps, the index just before Exit is somehow n.
    // In iOS, like Mac PC, iPad, and iPhone, stepIndex will be 'n - 1'.
    if (stepIndex === steps.length || stepIndex === steps.length - 1) {
      setStepEnabled(false);
      // Process that counts once the tour is completed to the end.
      const newNumberOfTimesCompleted = numberOfTimesCompleted + 1;
      setNumberOfTimesCompleted(newNumberOfTimesCompleted);
      await handleSubmitProductTour(
        docId,
        productTourName,
        newNumberOfTimesCompleted
      );
    }
  };

To Reproduce

To reproduce, prepare a Windows PC and a Mac PC (or iPad or iPhone) and try console logging stepIndex in the onExit function.

I was able to notice this because my fellow developer and I were using different operating systems. I don't think I would have noticed otherwise.

Expected behavior

I would like to see the same count for devices or rather operating systems.

How often does this bug happen?

Every time

System Info

PC Spec

Device

Device name DESKTOP-608QNA0
Processor Intel(R) Core(TM) i7-10710U CPU @ 1.10GHz 1.61 GHz
Installed RAM 16.0 GB (15.8 GB usable)
System type 64-bit operating system, x64-based processor
Pen and touch No pen or touch input is available for this display

OS

Edition Windows 10 Home
Version 21H2
Installed on ‎3/‎27/‎2021
OS build 19044.1826
Experience Windows Feature Experience Pack 120.2212.4180.0

Browser

Chrome Version 104.0.5112.81 (Official Build) (64-bit)

Mobile Spec

Device and OS

Software Version: 15.5
Model Name: iPhone 13 Pro

Browser

Chrome Version 103.0.5060.63

Additional Context

I don't know if it is because of Intro.js-react or Intro.js. So created the same issue for Intro.js too. https://github.com/usablica/intro.js/issues/1746

HiDeoo commented 1 year ago

Thanks for the very detailed issue. This is definitely a weird one.

I think intro.js by default, at least according to the documentation, does not provide the step index to the exit callback. This may have been something I added because I needed it at the time but it looks like I'm not doing anything fancy with it, I just call the callback with the _currentStep provided by the intro.js instance:

https://github.com/HiDeoo/intro.js-react/blob/main/src/components/Steps/index.js#L116

I just tried to repro the issue using the small demo I have for this repository but was unable to repro, I always get on exit step index 1 logged on macOS Monterey & Windows 10.

Would you be able to try it and see if you can repro on your end using this demo? https://codesandbox.io/s/citpdf

If not, would you be able to provide a repro of the issue?

HiDeoo commented 1 year ago

If you're still having this issue, feel free to re-open with a small repro example.

HiDeoo / intro.js-react