Tour guide does not target item placed inside mui dialog

[nwabueze1]

I am create a tour guide, I have a modal which is created on top mui dialog, when the modal is opened, it does not target the item correctly. below is my code

const [state, setState] = useState<{
        run: boolean;
        step: Step[];
        stepIndex: number;
    }>({
        run: true,
        step: [],
        stepIndex: 0,
    });
    const { run, step, stepIndex } = state;

    useMount(() => {
        setState({
            run: true,
            stepIndex: 0,
            step: [
                {
                    title: "Welcome to the page tour",
                    content: "Let's begin our journey",
                    locale: {
                        skip: <SkipButton />,
                        next: <NextButton />,
                        back: <PrevButton />,
                    },
                    placement: "center",
                    target: "body",
                },
                {
                    content: "You can switch between multiple websites, if you have more than one.",
                    target: ".site-selector",
                    title: "Your website name",
                },
                {
                    content: "Services integrated to your websites shows here",
                    title: "Here are your hives",
                    target: createTarget(tourSelectors.HIVES),
                    placement: "right-start",
                },
                {
                    title: "Create your first Page",
                    content: "Start by creating a unique page for your website",
                    target: createTarget(tourSelectors.CREATE_PAGE),
                    spotlightClicks: true,
                    disableBeacon: true,
                },
                {
                    title: "Select a page",
                    content: "Select a template to create your page with.",
                    target: ".select-page",
                    spotlightClicks: true,
                    disableBeacon: true,
                    placement: "right",
                    styles: {
                        options: {
                            zIndex: 10000,
                        },
                    },
                    isFixed: true,
                },
                {
                    title: "Select a page",
                    content: "Select a template to create your page with.",
                    target: ".select-page",
                    spotlightClicks: true,
                    disableBeacon: true,
                    placement: "right",
                    styles: {
                        options: {
                            zIndex: 10000,
                        },
                    },
                    isFixed: true,
                },
            ],
        });
    });
    useEffect(() => {
        if (form?.create_page_modal_open) {
            setState({ ...state, run: false, stepIndex: 4 });
            setTimeout(() => {
                setState({ ...state, run: true });
            }, 400);
        }
    }, [form]);
    
    const handleJoyRideCallback = (data: CallBackProps) => {
        const { action, index, status, type } = data;
        const nextStepIndex = index + (action === ACTIONS.PREV ? -1 : 1);
        console.log(index);

        if (type === EVENTS.STEP_AFTER && index === 0 && modalOpen) {
            // After the first step and modal is open, move to the modal content step
            setState({ ...state, run: true, stepIndex: 4 });
            return;
        }
        if (([STATUS.FINISHED, STATUS.SKIPPED] as string[]).includes(status)) {
            // Need to set our running state to false, so we can restart if we click start again.
            // setState({ run: false, stepIndex: 0 });
            setState({ ...state, run: false });
        } else if (([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND] as string[]).includes(type)) {
            console.log(nextStepIndex);
            setState({ ...state, stepIndex: nextStepIndex });
           
        }
    };
    
    <Joyride
                continuous
                callback={handleJoyRideCallback}
                run={run}
                steps={step}
                hideCloseButton
                scrollToFirstStep
                showSkipButton
                showProgress={false}
                tooltipComponent={Tooltip}
                disableOverlayClose={false}
                disableCloseOnEsc
                stepIndex={stepIndex}
            />
![Uploading Screenshot 2024-06-13 171705.png…]()

[gilbarbara]

Hey @nwabueze1

As mentioned in the issue template, I need a minimal reproducible example to be able to help.
Please post a stackblitz or repo.

Also, this is an implementation problem, not something with the library, so I'm moving it to discussions.

[nwabueze1]

Hi Thanks for the response, I was able to fix my issue by giving it a zindex of 999_999

[nwabueze1]

But then is there a way I can move this targeted section as shown in the attached image

[gilbarbara]

Hey,

I'm not sure what you mean with that image. Move what exactly?

[nwabueze1]

Like actually change the spotlight position, somehow it seems that when the item is positioned to the left, I tried using the left property of the styles option, but that didn't work. so I had to use transform:"translate" to resolve this. anyway this has been solved. Thanks for the response. I really appreciate.