Skip to main content

Hi all,

I want to attach a step to the custom dropdown form element. But because it's not an HTML SELECT element (I use ng-select), I can't use standard triggers for tour advance.

  1. "Click on the element" is not suitable, because when clicked the user jumps to the next step without possibility to select any dropdown option.
  2. "Fill in the field" opens dropdown but does not respond to option selection. Plus, options are overlapped by the tour's backdrop.
  3. "Next or Done button" blocks dropdown at all. User can't interact with it.

 

Is there any standard solution for such custom form elements? Or what would you suggest to me for this case?

Hey @andriy o​! When it comes to drop-down menus they usually don't work well with our Product Tours. It can depend on how the dropdown is designed and implemented on your website. Product Tour depends on CSS Selectors, any elements that are hidden, e.g. options in the dropdown menu, will not be targetable by the tour. In general, I've found the best approach for dealing with a drop-down in a tour is to think of it as multiple steps.

  1. Click on the dropdown menu
  2. Click on the element in the dropdown menu

 

Here is an article in relation to how to manually edit select a CSS selector. Just to let you know that to investigate an issue related to tour we need more information like link to the tour, your website URL, test user credentials etc. So I would suggest you opening a chat with our support team if further investigation is needed.

 

 


Reply