PopupUtils currentZIndex multiple instances causing is consistence z-index for popup.

[lormanlau]

Describe the bug
Importing multiple copies of the UI5 web component dependencies is effecting the PopupUtils z-index. UXR Homepage4 is using a util helper which helps load webcomponent and import its own dependencies and create a copy of the ui5 web component PopupUtils and keeps a copy of the currentZIndex. Homepage4 also has its own copy of ui5 web components dependencies causing inconsistent currentZIndex.

Expected behavior
Both copies to use a global currentZIndex variable for them to be consistent across multiple imports of each ui5 webcomponents dependency.

ui5-webcomponents/packages/main/src/popup-utils/PopupUtils.js

Line 3 in cb849ba

let currentZIndex = 100;

window.currentZIndex = window.currentZIndex || 100

Screenshots

ui5-webcomponents/packages/main/src/popup-utils/PopupUtils.js

Line 69 in cb849ba

const getNextZIndex = () => {

Context

• UI5 Web Components version: v0.29.4+

Affected components (if known)
v0.29.4+

Log output / Any errors in the console

The following tags have already been defined by a different UI5 Web Components version: ui5-textarea, ui5-icon, ui5-input, ui5-busyindicator, ui5-link, ui5-radiobutton, ui5-button, ui5-list, ui5-checkbox, ui5-dialog, ui5-avatar, ui5-li

Organization: (if applicable)
SAP SuccessFactors

Priority: (optional) (Low, Medium, High or Very High)
High

Business impact: (mandatory for "Very High")
High

[codefactor]

Is it also possible for integration with openui5 to share the same zindex?

[ilhan007]

Hello @lormanlau

we will downport the issue in 0.29.x branch, but what other versions of the UI5 Web Components you have in this scenario of multiple versions?

BR,
ilhan

[vladitasev]

Hello @lormanlau @codefactor

The change has been merged and downported to 0.29 and 0.31. New versions will be released shortly.

Please note that although the PR has a BREAKING CHANGE (PopupUtils.js moved to the base package), the 0.29 and 0.31 versions will have temporary code in the form of:

import {
	getFocusedElement,
	isClickInRect,
	getClosedPopupParent,
	getNextZIndex,
	getCurrentZIndex,
	isFocusedElementWithinNode,
} from "@ui5/webcomponents-base/dist/util/PopupUtils.js";

export {
	getFocusedElement,
	isClickInRect,
	getClosedPopupParent,
	getNextZIndex,
	getCurrentZIndex,
	isFocusedElementWithinNode,
};

so that your code, depending on getNextZIndex can continue to work without adaptations.

Also, make sure to read the PR description of the fix: #2980 as it contains important information about the usage with OpenUI5: if OpenUI5 is loaded second (lazily due to user interaction), the app would need the set the OpenUI5 z-index to the appropriate value.

Lastly, for the fix to work, naturally all microfrontends and apps must be updated to the latest respective version (for both 0.29 and 0.31). If there are older versions in this scenario, please let us know so we can patch them as well.

Regards,
Vladi