Option to make the highlighted area unclickable

[nigelsim]

I am using the exact versions of the following:

• Browser: Firefox 59
• AngularJS: 1.6.9
• Angular Bootstrap: 3.3.7
• Angular UI Tour: 0.9.2

I have installed this library via: yarn

I have observed the following behavior:

When a popup is shown it highlights the control being "toured", and I can click on that control.

This is how I expected it to behave:

I should not be able to click on the control because this will change the UI or start a process, which may not be fully intended.

Here is my tour config, and all related step configs:

var tourConfig = {};

No special config in use, other than what is in the HTML

<div class="container-fluid dashboard-wrapper"
  ui-tour="firstTour" 
  ui-tour-on-ready="$ctrl.onTourReady()" 
  ui-tour-placement="bottom" 
  ui-tour-on-backdrop-click="$ctrl.end()"
  ui-tour-backdrop="true"
  >

  <button class="btn btn-link btn-title-action pull-right" ng-click="$ctrl.newMission()"
    tour-step 
    tour-step-title="Missions" 
    tour-step-content="Add a mission by clicking the + button."      
    tour-step-order="10" 
    tour-step-placement="bottom-right"
    tour-step-backdrop="true"
    ><i class="fa-plus fa"></i></button>

Additional notes/code:

We work around this currently using the following code:

<div class="container-fluid dashboard-wrapper"
  ui-tour="firstTour" 
  ui-tour-on-ready="$ctrl.onTourReady()" 
  ui-tour-placement="bottom" 
  ui-tour-on-backdrop-click="$ctrl.end()"
  ui-tour-backdrop="true"
  ui-tour-on-show="unclickableBackdrop = true"
  ui-tour-on-hidden="unclickableBackdrop = false"
  >
  <div ng-if="unclickableBackdrop" class="unclickable-backdrop"></div>
...
</div>

.unclickable-backdrop {
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

[cluis13915]

Mi approach: The highlighted element has the class ui-tour-active-step, so you can disable it with CSS.

.ui-tour-active-step {
    pointer-events: none;
}

[benmarch]

Hey @nigelsim, sorry for the long delay. The ability to click the step target was actually a requested feature, but @cesarluis13915's suggestion is the best way to handle your use case.