diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts
index bb6d8d1c6fc1..527eca853592 100644
--- a/packages/main/src/MultiInput.ts
+++ b/packages/main/src/MultiInput.ts
@@ -182,9 +182,7 @@ class MultiInput extends Input {
}
_tokenizerFocusOut(e: FocusEvent) {
- const isFocusingMorePopover = e.relatedTarget === this.tokenizer.staticAreaItem;
-
- if (!this.contains(e.relatedTarget as HTMLElement) && !isFocusingMorePopover) {
+ if (!this.contains(e.relatedTarget as HTMLElement) && !this.shadowRoot!.contains(e.relatedTarget as HTMLElement)) {
this.tokenizer._tokens.forEach(token => { token.selected = false; });
this.tokenizer.scrollToStart();
}
diff --git a/packages/main/src/NavigationMenu.ts b/packages/main/src/NavigationMenu.ts
index 6e6cbe5119f0..e313fbfd7121 100644
--- a/packages/main/src/NavigationMenu.ts
+++ b/packages/main/src/NavigationMenu.ts
@@ -10,11 +10,11 @@ import type { MenuItemClickEventDetail } from "./Menu.js";
import StandardListItem from "./StandardListItem.js";
import MenuItem from "./MenuItem.js";
import type NavigationMenuItem from "./NavigationMenuItem.js";
-import staticAreaMenuTemplate from "./generated/templates/NavigationMenuTemplate.lit.js";
+import menuTemplate from "./generated/templates/NavigationMenuTemplate.lit.js";
// Styles
-import staticAreaNavigationMenuCss from "./generated/themes/NavigationMenu.css.js";
-import staticAreaMenuCss from "./generated/themes/Menu.css.js";
+import navigationMenuCss from "./generated/themes/NavigationMenu.css.js";
+import menuCss from "./generated/themes/Menu.css.js";
import {
NAVIGATION_MENU_POPOVER_HIDDEN_TEXT,
@@ -45,8 +45,8 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem };
@customElement({
tag: "ui5-navigation-menu",
renderer: litRender,
- staticAreaStyles: [staticAreaMenuCss, staticAreaNavigationMenuCss],
- staticAreaTemplate: staticAreaMenuTemplate,
+ styles: [menuCss, navigationMenuCss],
+ template: menuTemplate,
})
class NavigationMenu extends Menu {
diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
index 5dc771342490..01c3d5239738 100644
--- a/packages/main/src/Popover.ts
+++ b/packages/main/src/Popover.ts
@@ -86,6 +86,7 @@ type CalculatedPlacement = {
@customElement({
tag: "ui5-popover",
styles: [
+ Popup.styles,
browserScrollbarCSS,
PopupsCommonCss,
PopoverCss,
@@ -418,9 +419,6 @@ class Popover extends Popup {
this.arrowTranslateY = placement.arrow.y;
top = this._adjustForIOSKeyboard(top);
- const containingBlockClientLocation = this._getContainingBlockClientLocation();
- left -= containingBlockClientLocation.left;
- top -= containingBlockClientLocation.top;
Object.assign(this.style, {
top: `${top}px`,
@@ -472,8 +470,12 @@ class Popover extends Popup {
}
_showOutsideViewport() {
+ if (this.isConnected) {
+ this.setAttribute("popover", "manual");
+ this.showPopover();
+ }
+
Object.assign(this.style, {
- display: this._displayProp,
top: "-10000px",
left: "-10000px",
});
diff --git a/packages/main/src/Popup.hbs b/packages/main/src/Popup.hbs
index 34f15bdd7935..8cc419168bf7 100644
--- a/packages/main/src/Popup.hbs
+++ b/packages/main/src/Popup.hbs
@@ -1,4 +1,5 @@
include "./PopupBlockLayer.hbs"}}
\ No newline at end of file
diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts
index b30939a28bd5..09ccc7ea84ab 100644
--- a/packages/main/src/Popup.ts
+++ b/packages/main/src/Popup.ts
@@ -12,18 +12,17 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Ari
import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
import { isEnter, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+import { getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
import PopupTemplate from "./generated/templates/PopupTemplate.lit.js";
-import PopupBlockLayer from "./generated/templates/PopupBlockLayerTemplate.lit.js";
import PopupAccessibleRole from "./types/PopupAccessibleRole.js";
import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
// Styles
import popupStlyes from "./generated/themes/Popup.css.js";
-import popupStaticAreaStyles from "./generated/themes/PopupStaticAreaStyles.css.js";
+import popupBlockLayerStyles from "./generated/themes/PopupBlockLayer.css.js";
import globalStyles from "./generated/themes/PopupGlobal.css.js";
const createBlockingStyle = (): void => {
@@ -77,10 +76,8 @@ type PopupBeforeCloseEventDetail = {
*/
@customElement({
renderer: litRender,
- styles: popupStlyes,
+ styles: [popupStlyes, popupBlockLayerStyles],
template: PopupTemplate,
- staticAreaTemplate: PopupBlockLayer,
- staticAreaStyles: popupStaticAreaStyles,
})
/**
* Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**
@@ -228,17 +225,30 @@ abstract class Popup extends UI5Element {
super();
this._resizeHandler = this._resize.bind(this);
+
+ this._getRealDomRef = () => {
+ return this.shadowRoot!.querySelector("[root-element]")!;
+ };
}
onBeforeRendering() {
- this._blockLayerHidden = !this.isOpen() || !this.isTopModalPopup;
+ if (this._getBlockingLayer) {
+ if (!this.isOpen() || !this.isTopModalPopup) {
+ this._getBlockingLayer.hidePopover();
+ } else if (!this.shouldHideBackdrop) {
+ this._getBlockingLayer.showPopover();
+ }
+ }
}
onAfterRendering() {
- this._updateMediaRange();
+ renderFinished().then(() => {
+ this._updateMediaRange();
+ });
}
onEnterDOM() {
+ this.setAttribute("popover", "manual");
ResizeHandler.register(this, this._resizeHandler);
}
@@ -251,10 +261,6 @@ abstract class Popup extends UI5Element {
ResizeHandler.deregister(this, this._resizeHandler);
}
- get _displayProp() {
- return "block";
- }
-
_resize() {
this._updateMediaRange();
}
@@ -422,6 +428,10 @@ abstract class Popup extends UI5Element {
return isFocusedElementWithinNode(this._root);
}
+ get _getBlockingLayer() {
+ return this.shadowRoot!.querySelector(".ui5-block-layer")!;
+ }
+
/**
* Shows the block layer (for modal popups only) and sets the correct z-index for the purpose of popup stacking
* @protected
@@ -432,16 +442,16 @@ abstract class Popup extends UI5Element {
return;
}
+ // Await render before trying to access the blocking layer
+ await renderFinished();
+
if (this.isModal && !this.shouldHideBackdrop) {
// create static area item ref for block layer
- this.getStaticAreaItemDomRef();
+ this._getBlockingLayer.showPopover();
this._blockLayerHidden = false;
Popup.blockPageScrolling(this);
}
- this._zIndex = getNextZIndex();
- this.style.zIndex = this._zIndex?.toString() || "";
-
this._focusedElementBeforeOpen = getFocusedElement();
this._show();
@@ -455,8 +465,6 @@ abstract class Popup extends UI5Element {
this.opened = true;
this.open = true;
- await renderFinished();
-
if (!this._disableInitialFocus && !preventInitialFocus) {
await this.applyInitialFocus();
}
@@ -492,6 +500,7 @@ abstract class Popup extends UI5Element {
if (this.isModal) {
this._blockLayerHidden = true;
+ this._getBlockingLayer.hidePopover();
Popup.unblockPageScrolling(this);
}
@@ -536,7 +545,10 @@ abstract class Popup extends UI5Element {
* @protected
*/
_show() {
- this.style.display = this._displayProp;
+ if (this.isConnected) {
+ this.setAttribute("popover", "manual");
+ this.showPopover();
+ }
}
/**
@@ -544,7 +556,7 @@ abstract class Popup extends UI5Element {
* @protected
*/
hide() {
- this.style.display = "none";
+ this.isConnected && this.hidePopover();
}
/**
@@ -593,9 +605,6 @@ abstract class Popup extends UI5Element {
return {
root: {},
content: {},
- blockLayer: {
- "zIndex": this._zIndex ? this._zIndex - 1 : "",
- },
};
}
diff --git a/packages/main/src/PopupBlockLayer.hbs b/packages/main/src/PopupBlockLayer.hbs
index c1830da78fd2..8c40179c1126 100644
--- a/packages/main/src/PopupBlockLayer.hbs
+++ b/packages/main/src/PopupBlockLayer.hbs
@@ -1,7 +1,5 @@
+ @mousedown="{{_preventBlockLayerFocus}}">
diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs
index 77edebce7315..73c348d9414c 100644
--- a/packages/main/src/ResponsivePopover.hbs
+++ b/packages/main/src/ResponsivePopover.hbs
@@ -1,5 +1,6 @@
{{#if _isPhone}}
+
+{{>include "./SelectPopover.hbs"}}
\ No newline at end of file
diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index 99cf49462fa7..2d28078f53f6 100644
--- a/packages/main/src/Select.ts
+++ b/packages/main/src/Select.ts
@@ -60,7 +60,6 @@ import Button from "./Button.js";
// Templates
import SelectTemplate from "./generated/templates/SelectTemplate.lit.js";
-import SelectPopoverTemplate from "./generated/templates/SelectPopoverTemplate.lit.js";
// Styles
import selectCss from "./generated/themes/Select.css.js";
@@ -147,9 +146,8 @@ type SelectLiveChangeEventDetail = {
languageAware: true,
renderer: litRender,
template: SelectTemplate,
- staticAreaTemplate: SelectPopoverTemplate,
- styles: selectCss,
- staticAreaStyles: [
+ styles: [
+ selectCss,
ResponsivePopoverCommonCss,
ValueStateMessageCss,
SelectPopoverCss,
@@ -465,9 +463,8 @@ class Select extends UI5Element implements IFormElement {
return !!this.responsivePopover && this.responsivePopover.opened;
}
- async _respPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector