ngx-ui-tour icon indicating copy to clipboard operation
ngx-ui-tour copied to clipboard

🐞 - [md-menu] `nextOnAnchorClick` not working with `closeOnOutsideClick`

Open EliotRagueneau opened this issue 2 years ago β€’ 1 comments

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?

  • [X] Chrome
  • [ ] Firefox
  • [ ] Safari
  • [ ] Edge

Which operating systems have you used?

  • [X] macOS
  • [ ] Windows
  • [ ] Linux
  • [ ] iOS
  • [ ] Android

EliotRagueneau avatar Oct 13 '23 11:10 EliotRagueneau