Backdrop is removed when closing user overlay in tour

[bjarnef]

Which exact Umbraco version are you using? For example: 8.13.1 - don't just write v8

8.15.0

Bug summary

I noticed when taking "Getting Started" tour in content the tour has the backdrop to highlight on the specific element.
However in step 9/12 when close user overlay the backdrop is lost.

Specifics

No response

Steps to reproduce

Run "Getting Started" tour in content section and notice in step 9/12 when close user overlay, the backdrop / backshadow is removed.

Expected result / actual result

No response

[bjarnef]

@BatJan I have noticed you previous has working with the backdrop. Maybe something has affected this?

[nul800sebastiaan]

I just tried a few versions and the backdrop started disappearing in 8.7.0.

[umbrabot]

Hi @bjarnef,

We're writing to let you know that we would love some help with this issue. We feel that this issue is ideal to flag for a community member to work on it. Once flagged here, folk looking for issues to work on will know to look at yours. Of course, please feel free work on this yourself ;-). If there are any changes to this status, we'll be sure to let you know.

For more information about issues and states, have a look at this blog post

Thanks muchly, from your friendly Umbraco GitHub bot :-)

[bjarnef]

Could be related to changes of some z-indexes or moving DOM elements, maybe changes in this PR #7923

[bjarnef]

In content section when running tour "Create content -> Creating content" tour and clicking "Content Page" menu item in step 4/9 something seems to set backdrop.show to false as the DOM element is removed here:

I logged a bit out in console and apparently it hit this close function, when clicking this button.
https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js#L60-L67

[bjarnef]

It seems it is an issue with this function as the leftcolumn actually does have the above-backdrop class.

Umbraco-CMS/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js

Lines 322 to 331 in d428a45

	function closeBackdrop() {
	var aboveClass = 'above-backdrop';
	var leftColumn = $('#leftcolumn');
	var isLeftColumnOnTop = leftColumn.hasClass(aboveClass);
	if(isLeftColumnOnTop){
	backdropService.close();
	leftColumn.removeClass(aboveClass);
	}
	}

[bjarnef]

Fixed in #10762