make selectors storybook 8 compatible

storybookjs · Dec 27, 2023 · dc9d5ea · dc9d5ea
1 parent 8f95282
commit dc9d5ea
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/features/GuidedTour/GuidedTour.tsx b/src/features/GuidedTour/GuidedTour.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Joyride, { CallBackProps, STATUS } from "react-joyride";
 import { API } from "@storybook/manager-api";
 import { UPDATE_STORY_ARGS } from "@storybook/core-events";
@@ -34,6 +34,11 @@ export function GuidedTour({
     });
   }, []);
 
+
+  const storyPlaygroundElement = useMemo(() => {
+    return (document.querySelector("#root div[role=main]") || document.querySelector("#storybook-panel-root")) as HTMLElement
+  }, [])
+
   const steps: GuidedTourStep[] = isFinalStep
     ? [
       {
@@ -100,7 +105,7 @@ export function GuidedTour({
         },
       },
       {
-        target: "#root div[role=main]",
+        target: storyPlaygroundElement,
         title: "Interactive story playground",
         content: (
           <>