Why isn't my Beacon displaying before the tooltip?

[Sharing-Zou]

Here is my code：

const steps: TourProps['steps'] = [
		{
			content: (
				<div>
					Learn how to provisioning connector within Splashtop Secure Workspace.
				</div>
			),
			disableBeacon: true,
			placement: 'right',
			title: 'Provision Connector',
			target: ".menuContainer li[data-label='Deployment'] li[data-label='Connector']",
			data: {
				id: 'deployment_connector_sidebar',
				tooltipWidth: 380,
				navigate: {
					path: '#/networks/connector',
				},
			},
		},
		{
			content: <div>Click on the Add Connector button.</div>,
			disableBeacon: true,
			placement: 'left',
			title: 'Provision Connector',
			target: "button[data-label='add connector button']",
			data: {
				id: 'add_connector_button',
				beforeNext: (index: number) => {
					(
						document.querySelector(
							"button[data-label='add connector button']",
						) as any
					)?.click();
				},
			},
		},
		{
			content: <AddConnStep />,
			disableBeacon: true,
			placement: 'left',
			title: 'Provision Connector',
			target: '[data-label="drawer content"] #joyride-connector-deploy',
			data: {
				id: 'add_connector_drawer',
				tooltipWidth: 600,
				beforeNext: () => {
					(
						document.querySelector(
							'[data-label="drawer content"] #joyride-close-drawer',
						) as any
					)?.click();
					sidebarMenuRef?.current.openItem('app');
				},
			},
		},
		{
			content: (
				<div>
					Learn how to provision private applications, configure access
					permissions, and privileged accounts.
				</div>
			),
			placement: 'right',
			disableBeacon: true,
			title: 'Provision Private Application',
			target: ".menuContainer li[data-label='Applications'] li[data-label='Applications']",
			data: {
				id: 'application_sidebar',
				navigate: {
					path: '#/applications/application',
					params: { btn_click: 'add' },
				},
			},
		},
		{
			content: (
				<div>
					Click on the Add Application(s) button. Choose Add Private Application
				</div>
			),
			placement: 'left',
			disableBeacon: true,
			title: 'Provision Private Application',
			target: "[data-label='main content-add app menu'] #joyride-add-private",
			data: {
				id: 'add_private_app',
				navigate: {
					path: '#/applications/new',
				},
			},
		},
		{
			content: <GeneralSetting />,

			placement: 'right',
			placementBeacon: 'right',
			title: 'Provision Private Application',
			target: "[data-label='application form content'] div[data-label='general settings']",
			data: {
				id: 'private_app_GeneralSetting',
			},
		},
		{
			content: <GroupPolicy />,
			placement: 'right',
			title: 'Provision Private Application',
			target: "[data-label='application form content'] div[data-label='group and policy']",
			data: {
				id: 'private_app_GroupPolicy',
			},
		},
		{
			content: <DA />,
			placement: 'right',
			disableBeacon: false,
			title: 'Provision Private Application',
			target: "[data-label='application form content'] div[data-label='dynamic credentials']",
			data: {
				id: 'private_app_DA',
			},
		},
		{
			content: <Advance />,
			placement: 'right',
			disableBeacon: false,
			title: 'Provision Private Application',
			target: "[data-label='application form content'] div[data-label='other settings']",
			data: {
				id: 'private_app_Advance',
			},
		},
	];

const handleCallback = async (data: CallBackProps) => {
		const {
			step: {
				data: { beforeNext, navigate: route, beforePrev },
			},
			status,
			action,
			type,
			index,
			size,
		} = data;

		// console.log('>>>>>>>>>joyride handleCallback', data);

		if (([STATUS.FINISHED, STATUS.SKIPPED] as string[]).includes(status)) {
			setRun(false);
			setStepIndex(0);
			setHashSearchParams(new URLSearchParams());

			return;
		}

		if (index + 1 === size && type === EVENTS.STEP_AFTER) {
			setRun(false);
			setStepIndex(0);
			setHashSearchParams(new URLSearchParams());

			return;
		}

		if (type === EVENTS.TOUR_START && action === ACTIONS.NEXT) {
			console.log('>>>>>>>>>joyride tour:start & next');
		}

		if (
			([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND] as string[]).includes(type)
		) {
			const nextStepIndex = index + (action === ACTIONS.PREV ? -1 : 1);

			setRun(false);

			if(action === ACTIONS.NEXT){
				if (beforeNext) await beforeNext(data);
				if (route) {
					navigate(route);
				}
			}

			if(action === ACTIONS.PREV){
				if (beforePrev) await beforePrev(data);
			}
			await delay();
			setStepIndex(nextStepIndex);
			setRun(true);
		}
	};

return （<Joyride
				callback={handleCallback}
				continuous
				run={run}
				scrollToFirstStep
				showProgress
				spotlightPadding={0}
				disableOverlayClose
				hideCloseButton
				showSkipButton
				spotlightClicks
				stepIndex={stepIndex}
				floaterProps={{
					disableAnimation: true,
					styles: { arrow: { length: 10, spread: 20 } },
				}}
				styles={{
					spotlight: {
						backgroundColor: '#ffffff57',
					},
					options: {
						zIndex: 10000,
					},
				}}
				steps={steps}
				tooltipComponent={JoyTooltip}
			/>）

Screen.Recording.2024-07-05.at.18.12.05.mov

[gilbarbara]

Hey @Sharing-Zou
The first step has the disableBeacon: true property so it won't show the beacon.
And since you are using a continuous tour, you don't need to add disableBeacon: true to the other steps. Or disableBeacon: false ever since it's the default.

[Sharing-Zou]

Why does this codesandbox, where I use continuous and set disableBeacon: true for the first step, show the Beacon as expected in the "Users" step? Moreover, in the codesandbox works as expected and shows the Beacon correctly, but in my own project, the Beacon doesn't display. I want to control which step the Beacon shows up.

https://codesandbox.io/p/devbox/modest-dhawan-ngk4cp?file=%2Fsrc%2FControlled%2Findex.tsx%3A75%2C11-75%2C24&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clxu5ta3200073b6nul2v2vdm%2522%252C%2522sizes%2522%253A%255B84.72868217054264%252C15.27131782945736%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clxu5ta3100023b6ncmeo8b73%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clxu5ta3200043b6nu7r7zb94%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clxu5ta3200063b6nwjfyt8b4%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clxu5ta3100023b6ncmeo8b73%2522%253A%257B%2522id%2522%253A%2522clxu5ta3100023b6ncmeo8b73%2522%252C%2522activeTabId%2522%253A%2522clxwxxoac03103b6p3x6652hg%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxu5ta3100013b6nzn0efgsj%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FBasic%252Findex.tsx%2522%252C%2522id%2522%253A%2522clxvhwaia02823b6p1jmt9x34%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clxwxxoac03103b6p3x6652hg%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A123%252C%2522startColumn%2522%253A35%252C%2522endLineNumber%2522%253A123%252C%2522endColumn%2522%253A35%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FControlled%252Findex.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%257D%252C%2522clxu5ta3200063b6nwjfyt8b4%2522%253A%257B%2522id%2522%253A%2522clxu5ta3200063b6nwjfyt8b4%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxu5ta3200053b6n6z9kwa84%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522port%2522%253A3000%252C%2522path%2522%253A%2522%252Fcontrolled%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clxu5ta3200053b6n6z9kwa84%2522%257D%252C%2522clxu5ta3200043b6nu7r7zb94%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxu5ta3100033b6nlzx8i6i9%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%257D%255D%252C%2522id%2522%253A%2522clxu5ta3200043b6nu7r7zb94%2522%252C%2522activeTabId%2522%253A%2522clxu5ta3100033b6nlzx8i6i9%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[gilbarbara]

In a continuous tour, if the user clicks the X to close the tooltip, the tooltip will be closed, and the next step's Beacon will be rendered.
If you want the X not to close the tooltip but instead go to the next step's Tooltip, set disabledBeacon: true to that step.
Or set it for all steps if you want the whole tour to behave that way.

However, this will remove the possibility of literally closing the tooltip. The user's only options are to keep going or skip.

[TusharRajput-817]

Hi @gilbarbara is there a way to set the status to close suppose on click of X or write any logic to manipulate based on the actions.

[gilbarbara]

Hey @TusharRajput-817

You could use the helpers to change the status programmatically or use the callback to get the current status and act upon it.
Check the docs for more information.