Mask is not highlighting target element completely because it not scroll up as much as needed to top when press back button!

[devaeshtech]

So, Basically mask is highlighting the element but tour is not scroll properly to top so that's why its highlighting only half of the target element. Please help in this issue. @elrumordelaluz

https://user-images.githubusercontent.com/125268157/227761541-512d783d-e118-4248-942b-4e2a7dafa8a1.png

[elrumordelaluz]

Hi @devaeshtech, thanks for open the Issue.

Mind creating a minimal reproduction in a sandbox in order to allow others to debug your use-case and try to find a solution? Thanks!

[devaeshtech]

Hi @devaeshtech, thanks for open the Issue.

Mind creating a minimal reproduction in a sandbox in order to allow others to debug your use-case and try to find a solution? Thanks!

Sorry, I cant reproduce it again because it a big page in screenshot. But ye this is only issue with not scrolling to top properly when press back button. Actually It only scroll little but not sufficient for target element to come into view properly.

[elrumordelaluz]

when press back button

you mean the one of the browser?

Can you share at least the way you are changing steps with route changes?

[lullabyX]

Hi, I am facing the same issue. All my steps are in a single page.

<TourProvider
          padding={{mask: 0, popover: 10, wrapper: 0}}
          styles={{
            maskArea: (base) => ({
              ...base,
              rx: 15,
            }),
            popover: (base, state) => ({
              ...base,
              ...doArrow(state?.position, state?.verticalAlign, state?.horizontalAlign),
            }),
          }}
          showBadge={false}
          disableInteraction
          onClickHighlighted={(e) => {
            e.preventDefault();
            e.stopPropagation();
          }}          
          disableKeyboardNavigation={['esc']}
          scrollSmooth
          onClickMask={() => {}}
          startAt={0}
          steps={steps}>{children}</TourProvider>

and my steps

const steps: StepType[] = [
  {
    content: () => {
      return <h1>Log Craving</h1>;
    },
    position: 'right',
    selector: '#log-craving',
  },
  {
    content: () => {
      return <h1>If then</h1>;
    },
    position: 'left',
    selector: '#if-then',
  },
  {
    content: () => {
      return <h1>Journal</h1>;
    },
    position: 'right',
    selector: '#journal',
  },
  {
    content: () => {
      return <h1>Motivation Board</h1>;
    },
    position: 'left',
    selector: '#motivation-board',
  },
  {
    content: () => {
      return <h1>Log Drink</h1>;
    },
    position: 'top',
    selector: '#log-drink',
  },
];

[elrumordelaluz]

@lullabyX are you able to make a reproduction in a sandbox?

[pdl5p]

@elrumordelaluz I'm able to reproduce this issue. It seems that when a target node is within a scroll container that is not the body, and the node is still completely contained within the viewport (but hidden due to scroll) then Tour doesn't scroll the node into view.

Sandbox sample here

https://codesandbox.io/p/sandbox/github/pdl5p/reactour-demo/tree/main?file=%2Fsrc%2FApp.tsx%3A1%2C1

[elrumordelaluz]

Hi @pdl5p, This is the expected behavior, since the element is in viewport. However you can take advantage of inViewThreshold prop which allows you to add tolerance for this inView calculations.

Here is a working example.