Tour step content appearing behind backdrop

[Aldo66]

I'm experiencing an issue using tour with Angular Material dialogs. Specifically, the tour step appears behind the dialog's backdrop, making it invisible even though I've tried increasing its z-index and tried different CSS overrides but without success.

This happens when I set backdropConfig.zIndex: 1001. The reason I do that is because without it, there is no backdrop at all and then the "Name" field is not highlighted.

I am currently using version 9.x with Angular 14.x

[hakimio]

When both your dialog and tour step have the same z-index, you can try to fix the stacking issue by setting backdrop parent container for the tour step where you have this issue:
BackdropConfig.parentContainer

The setting was introduced in v10.2.0 which requires at least Angular 15.

[Aldo66]

I updated to Angular 15.x and ngx-ui-tour-md-menu to 10.x, tried with different options for the backdropConfig.parentContainer and still the same, no matter what CSS selector I use it is same as before. And I still need to set backdropConfig.zIndex: 1000 to have the backdrop effect and regardless of the backdropConfig.parentContainer the tour step is still behind the backdrop.

[hakimio]

What do you use as the parent container?
Create a stackblitz reproduction and, when I have time, I'll see if I can make it work.

EDIT: use latest version of ngx-ui-tour and Angular when creating the reproduction.