Left Position of Element Not Set Until Scroll in Next.js App

[Battjmo]

Weird little issue: I've made a very basic two-step tutorial to test out the library for my app.

I've set my two steps to attach to a search bar in the middle of the page, the first on bottom, the second top

Options and steps:

  const tourOptions = {
    defaultStepOptions: {
      cancelIcon: {
        enabled: true,
      },
    },
    useModalOverlay: true,
  };

  const tourSteps: any = [
    {
      id: "welcome",
      text: "Welcome to ...! This is a quick tour of the features you can expect to find here.",
      attachTo: {
        element: "#searchBar",
        on: "bottom",
      },
      buttons: [
        {
          classes: "shepherd-button-secondary",
          text: "Exit",
          type: "cancel",
        },
        {
          classes: "shepherd-button-primary",
          text: "Back",
          type: "back",
        },
        {
          classes: "shepherd-button-primary",
          text: "Next",
          type: "next",
        },
      ],
      classes:
        "flex flex-col z-40 bg-white text-black border-black border-2 border-dashed p-3 ",
    },
    {
      id: "secondi",
      text: "Welcome to ...! This is a quick tour of the features you can expect to find here.",
      attachTo: {
        element: ".search-bar",
        on: "top",
      },
      classes:
        "flex flex-col z-40 bg-white text-black border-black border-2 border-dashed p-3 ",
    },
  ];

When I click the button to start the tutorial, or the next button to bring up the second step of the tutorial, the popups are always left-aligned, then snap into the correct position on scroll. The left style on .shepherd-element only gets populated on scroll, seems to be the issue. The top is correct.

I'm using Next.js, but this is a client component so it shouldn't be a serverside rendering issue or anything I would think. I tried hooked it up to window to make sure and that didn't help.

Totally possible I've missed something silly here, would appreciate any help, thanks!

[chuckcarpenter]

@Battjmo nothing stands out to me other than you're selecting the first element with an id and the second w/ a class, but you said it's the same element. I tried to replicate by doing something similar on this codesandbox and don't see an issue. https://codesandbox.io/p/sandbox/admiring-hellman-23nzm?file=%2Fsrc%2Fsteps.ts%3A44%2C22

Are you able to create one to replicate on with a basic version of your app?

[Battjmo]

@chuckcarpenter thanks for the quick reply!

Basic Repro

It's a little different this time, but there are still some weird behaviors:

• the modal background doesn't apply
• the first slide doesn't go away when I click to the second one
• the first slide is in the right spot now, but not the second.

Thanks again