Possibility to 'next' on highlighted button

[andredewaard]

Cant find any documentation or issue about this so maybe im just missing something.
But lets say i want to create a tour where you need to click on some buttons inside the app, instead of having 'next' buttons in the popovers i want the buttons im highlighting to do this.

[andredewaard]

export const createClientTour = (navigate: UseNavigateResult<string>) =>
  driver({
    showProgress: true,
    steps: [
      {
        element: '#settings-link',
        popover: {
          title: 'Let’s open settings',
          description: 'Manage all firm and client settings from one place.',
          onNextClick: async () => {
            await navigate({ to: '/settings' });
            createClientTour(navigate).moveNext();
          },
          onPopoverRender(popover, opts) {
            document.querySelector('#settings-link')?.addEventListener('click', () => {
              createClientTour(navigate).moveNext();
            });
          },
        },
        onDeselected: () => {
          // .. remove element
          document.querySelector('#settings-link')?.removeEventListener('click', () => {
            createClientTour(navigate).moveNext();
          });
        },
      },
      {
        element: '#client-settings-link',
        popover: {
          title: 'Let’s open client settings',
          description: 'Manage all client-specific settings from here.',
        },
      },
      {
        element: '#open-add-client-button',
        popover: {
          title: 'Let’s open add client modal',
          description: 'Click this button to add a new client.',
        },
      },
    ],
  });

This is the only thing i can come up with. The problem with this is

1. I have no way to actually remove the correct click event
2. I cant await the navigation since the link im clicking is navigating to the settings.

[MadMilliner]

With the help of Claude I ended up with this

onHighlighted: (element) => {
  const currentStepIndex = driverObj.getActiveIndex();
  
  if (currentStepIndex !== undefined) {
    if (currentStepIndex === 6 && combatants.length === 0) {
      element?.addEventListener('click', () => {
        setTimeout(() => {
          driverObj.moveTo(8);
        }, 50);
      }, { once: true });
      return;
    }
    
    if ([0, 2, 5, 6, 7].includes(currentStepIndex)) {
      element?.addEventListener('click', () => {
        setTimeout(() => {
          driverObj.moveNext();
        }, 50);
      }, { once: true });
    }
  }

The steps indicated will now advance when the element highlighted is clicked. It works well, adjust the timeout as needed. I also hide the next button for those steps.
It would be really nice if this was built in though, seems like a common enough need.