I am not able to interact with the element which is targeted by me . Most likely due to helperLayer and overlay zIndex.

[divyej]

Is your feature request related to a problem?

I am trying to interact with the textField which i have targeted during the tour but i am not able to interact with it . Same with any FormGroup or switches and buttons.

Describe the solution you'd like

I want it to interact with the elements which i have targeted during the tour .

Describe alternatives you've considered

No response

Additional Context

No response

[HiDeoo]

Thanks for your report.

I tried reproducing the issue but did not manage to do so, I was always able to interact with elements, e.g. a text input. Maybe something in your own CSS?

Would you be able to provide a small minimal reproduction of the issue?

[divyej]

this is the App.jsx part `

  useEffect(() => {
    // Add event listener to trigger tour on click
    const step1Element = document.querySelector(".step1");
    console.log(step1Element);
    if (step1Element) {
      startTour(); 
    }

  }, []);

  const startTour = () => {
    setStepsEnabled(true);
  };

  const handleExit = () => {
    setStepsEnabled(false);
  };

  const handleBeforeChange = (nextStepIndex, nextElement) => {
    if (stepsRef.current) {
      stepsRef.current.updateStepElement(nextStepIndex);    
    }
    if (nextStepIndex === 6) {
      const input = document.querySelector('.keywords input[type="text"]');
      console.log(input);
      if (!input.value) {
        return false;
      }
    }
    }

  };

  return (
    <>
      <ThemeProvider isDarkTheme={isDarkTheme}>
        {/* <Sidebar toggleDarkMode={toggleDarkMode}/> */}
        <AlertSnackbar />

        <Router>
          <Steps 
            enabled={stepsEnabled}
            steps={steps} 
            initialStep={initialStep} 
            onExit={handleExit}     
            onBeforeChange={handleBeforeChange} 
            ref={stepsRef}
            options={{
              exitOnOverlayClick: false,
            }}
          />
          <Routes toggleDarkMode={toggleDarkMode} />
        </Router>

        {/* <Card/> */}  
      </ThemeProvider>
    </> 
  );    
}
`

and this is the element which i am trying to target which is inside a dialog box

`
 <Stack spacing={1}>

                      <TextField
                        variant="standard"
                        margin="dense"
                        placeholder={labels[index].placeholder}
                        required
                        id="keywords"
                        className="keywords"
                        name="keywords"
                        value={formData.keys}
                        onChange={(e) =>
                          setFormData({ ...formData, keys: e.target.value })
                        }
                      />

            </Stack>
                    `

[HiDeoo]

Thanks for sharing but this is unfortunately not helping a lot as it's only a portion of a component, does not include other components that may be related or include CSS that may conflict.

To provide a small and minimal reproducible example, you can use either https://stackblitz.com/ or https://codesandbox.io/ and come up with a small example that reproduces the issue. This way, it will be easier to understand the problem and provide a solution.

[HiDeoo]

I am going to close this issue for now in the absence of a minimal reproducible example. Feel free to reopen it if you can provide one.