Skip to content

🐞 - [md-menu] nextOnAnchorClick not working with closeOnOutsideClick #155

@EliotRagueneau

Description

@EliotRagueneau

Which ngx-ui-tour-* package is the source of the bug?

md-menu

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-wau2z8?file=src%2Fapp%2Fui-tour-demo.component.ts

Description

When a step is having both nextOnAnchorClick and closeOnOutsideClick, clicking on the anchor is closing the tour instead of going to the next step.

I found a way to fix this issue from the user side, which also enhance a bit the backdrop, by adding a div color-backdrop when the tour is present, with the following scss:

.color-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: auto;
  background: rgba(black, 0.5);
  opacity: 1 !important;
  z-index: 998;
}

And having the following scss on active anchor, though it requires to add clickable on the anchors having closeOnOutsideClick

.touranchor--is-active {
  position: relative;
  z-index: 999;
  &[clickable] {
    z-index: 1003;
  }
}

Maybe you could to try to include that fix natively, or maybe another solution which could potentially work on all situations, since mine is quite specific to Material Design😄

Angular version

16.2.6

Ngx UI Tour version

11.0.4

Which browsers have you used?

  • Chrome
  • Firefox
  • Safari
  • Edge

Which operating systems have you used?

  • macOS
  • Windows
  • Linux
  • iOS
  • Android

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions