how ignore that "click highlight"?

[rafaelsevla]

Every start that highlight is displayed (see image above)

my code:

<ReactJoyride
            callback={handleJoyrideCallback}
            continuous
            hideCloseButton
            scrollToFirstStep
            showProgress
            showSkipButton
            steps={steps}
            run={teste.run}
            tooltipComponent={Tooltip}
            spotlightPadding={500}
            styles={{ options: {
              arrowColor: 'transparent',
              overlayColor: 'rgb(0,0,0, 0.9)',
              zIndex: 10000,
            }}}
          />

const [ teste, setTeste ] = useState({ stepIndex: 0, run: false });

  function handleJoyrideCallback (data: CallBackProps) {
    const { status } = data;
    const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];

    if (finishedStatuses.includes(status)) {
      setTeste({ ...teste, run: false });
    }
  };

 const Tooltip = ({
    continuous,
    index,
    step,
    backProps,
    closeProps,
    primaryProps,
    tooltipProps,
  }: any) => {
    console.log('tooltipProps', tooltipProps)
    return (
      <>
        <div style={{ border: '1px solid white', padding: 10, borderRadius: 10 }}>
          {step.title && <span style={{ color: 'white' }}>{step.title}</span>}
          <div style={{ color: 'white' }}>{step.content}</div>
          <div>
            {index > 0 && (
              <button {...backProps}>
                <span id="back"> back </span>
              </button>
            )}
            {continuous && (
              <button {...primaryProps}>
                <span id="next"> continouss </span>
              </button>
            )}
            {!continuous && (
              <button {...closeProps}>
                <span id="close"> close </span>
              </button>
            )}
          </div>
        </div>
      </>
    )
  };

[rafaelsevla]

My step things:

  const steps: Step[] = [
    {
      target: '.my-other-step',
      content: 'This another awesome feature!',
    },
    {
      target: '.my-first-step',
      content: 'This is my awesome feature!',
    },
    {
      target: '.my-thirdy-step',
      content: 'This another awesome feature!',
      styles: {
        options: {
          width: 200
        }
      }
    },
  ];

[gilbarbara]

Hey @rafaelsevla

Check out the step docs.
You can set the disableBeacon prop in the first step.

[rafaelsevla]

ohh thanks :)