Target selector with responsive layout (hidden / md:hidden)

[saulogt]

I'm having a hard time to make React Joyride work in this scenario. Have you ever encountered/ solved this?

Here is my steps definition and it works perfectly well for non responsive layout:

  const steps: Step[] = [
    {
      target: ".btn1",
      content: t("mark-reference"),
    },

    {
      target: ".btn2",
      content: t("mark-eyes"),
    },
    {
      target: ".btn3",
      content: t("mark-center"),
    },
    {
      target: ".btn4",
      content: t("mark-base"),
    },    
  ];

The problem is when I show/hide the whole set of elements depending on the screen's width. On the desktop view joyride works nicely, but I get the "Target not visible" error, even though there is always a visible element matching the class. There is a class btn1,2,3,4 always visible.

<div className="fixed bottom-4 flex w-full flex-row justify-center gap-4 md:hidden">
  <Button className="btn1 flex h-12 w-12 items-center justify-center">
    <FaPen />
  </Button>
  <Button className="btn2 flex h-12 w-12 items-center justify-center">
    <FaEraser />
  </Button>
  <Button className="btn3 flex h-12 w-12 items-center justify-center">
    <FaSave />
  </Button>
  <Button className="btn4 flex h-12 w-12 items-center justify-center">
    <FaUndo />
  </Button>
  <Button className="h-12 px-4">Submit</Button>
</div>;

{
  /* Desktop layout (show only on md screens and above) */
}
<div className="absolute left-1/2 top-4 z-10 hidden w-auto -translate-x-1/2 transform flex-row items-center gap-4 md:flex">
  <Button className="btn1 flex h-12 w-12 items-center justify-center">
    <FaPen />
  </Button>
  <Button className="btn2 flex h-12 w-12 items-center justify-center">
    <FaEraser />
  </Button>
  <Button className="btn3 flex h-12 w-12 items-center justify-center">
    <FaSave />
  </Button>
  <Button className="btn4 flex h-12 w-12 items-center justify-center">
    <FaUndo />
  </Button>
  <Button className="h-12 px-4">Submit</Button>
</div>;

Any ideas?

[gilbarbara]

Hey @saulogt

Without a running example, it's impossible to understand what is going on.

Whenever you get the error, could you try querying the step target in the console to see if you get a match?

document.querySelector('.btn1')

[saulogt]

Unfortunately the code base is complex to extract a working demo. I solved this by making sure I have only one element in the Dom that matches the selector.

Essentially, the error was happening because more than one element with the same class existed, and I was only controlling the visibility of them.

Thanks anyway