Skip to content

feat(ui5-popover): support setting "null" for opener #11995

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Aug 4, 2025
Merged

feat(ui5-popover): support setting "null" for opener #11995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0e20e3f
feat(ui5-popover): support setting "null" for opener
ilhan007 Jul 24, 2025
536911e
feat(ui5-popover): support setting "null" for opener
ilhan007 Jul 24, 2025
a8b4b78
Merge branch 'main' into feat-popover-opener-null
ilhan007 Jul 24, 2025
535263e
chore: update
ilhan007 Jul 24, 2025
b3016d2
chore: fix lint
ilhan007 Jul 25, 2025
a592895
Merge branch 'main' into feat-popover-opener-null
ilhan007 Jul 25, 2025
1deffe0
chore: show at top-left if opener null|undefined
ilhan007 Jul 25, 2025
b866da5
chore: remove type Opener for better readability in docs
ilhan007 Aug 4, 2025
a84fc25
Merge branch 'main' into feat-popover-opener-null
ilhan007 Aug 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/fiori/src/UserMenu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ class UserMenu extends UI5Element {
* @default undefined
*/
@property({ converter: DOMReferenceConverter })
opener?: HTMLElement | string;
opener?: HTMLElement | string | null;

/**
* Defines if the User Menu shows the Manage Account option.
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/ColorPalettePopover.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ class ColorPalettePopover extends UI5Element {
* @since 1.21.0
*/
@property({ converter: DOMReferenceConverter })
opener?: HTMLElement | string;
opener?: HTMLElement | string | null;

/**
* Defines the content of the component.
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/Menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ class Menu extends UI5Element {
* @since 1.10.0
*/
@property({ converter: DOMReferenceConverter })
opener?: HTMLElement | string;
opener?: HTMLElement | string | null;

/**
* Defines the items of this component.
Expand Down
22 changes: 15 additions & 7 deletions packages/main/src/Popover.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ class Popover extends Popup {
@slot({ type: HTMLElement })
footer!: Array<HTMLElement>;

_opener?: HTMLElement | string;
_opener?: HTMLElement | string | null | undefined;
_openerRect?: DOMRect;
_preventRepositionAndClose?: boolean;
_top?: number;
Expand All @@ -216,7 +216,7 @@ class Popover extends Popup {
* @since 1.2.0
*/
@property({ converter: DOMReferenceConverter })
set opener(value: HTMLElement | string) {
set opener(value: HTMLElement | string | null) {
if (this._opener === value) {
return;
}
Expand All @@ -228,7 +228,7 @@ class Popover extends Popup {
}
}

get opener(): HTMLElement | string | undefined {
get opener(): HTMLElement | string | null | undefined {
return this._opener;
}

Expand All @@ -243,7 +243,7 @@ class Popover extends Popup {
return;
}

if (this.isOpenerOutsideViewport(opener.getBoundingClientRect())) {
if (!opener || this.isOpenerOutsideViewport(opener.getBoundingClientRect())) {
await renderFinished();
this.open = false;
this.fireDecoratorEvent("close");
Expand Down Expand Up @@ -290,8 +290,8 @@ class Popover extends Popup {
removeOpenedPopover(this);
}

getOpenerHTMLElement(opener: HTMLElement | string | undefined): HTMLElement | null | undefined {
if (opener === undefined) {
getOpenerHTMLElement(opener: HTMLElement | string | null | undefined): HTMLElement | null | undefined {
if (opener === undefined || opener === null) {
return opener;
}

Expand Down Expand Up @@ -375,6 +375,14 @@ class Popover extends Popup {

const opener = this.getOpenerHTMLElement(this.opener);

if (!opener) {
Object.assign(this.style, {
top: `0px`,
left: `0px`,
});
return;
}

if (opener && instanceOfUI5Element(opener) && !opener.getDomRef()) {
return;
}
Expand All @@ -393,7 +401,7 @@ class Popover extends Popup {

if (this.open) {
// update opener rect if it was changed during the popover being opened
this._openerRect = opener!.getBoundingClientRect();
this._openerRect = opener.getBoundingClientRect();
}

if (this._oldPlacement && this.shouldCloseDueToNoOpener(this._openerRect!) && this.isFocusWithin()) {
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/Tokenizer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ class Tokenizer extends UI5Element {
@property({
converter: DOMReferenceConverter,
})
opener?: HTMLElement;
opener?: HTMLElement | string | null;

/**
* Sets the min-width of the nMore Popover.
Expand Down Expand Up @@ -1032,7 +1032,7 @@ class Tokenizer extends UI5Element {
return this.getSlottedNodes<Token>("tokens");
}

get morePopoverOpener(): HTMLElement {
get morePopoverOpener(): HTMLElement | string | null {
// return this.opener ? this : this.opener;
if (this.opener) {
return this.opener;
Expand Down
33 changes: 33 additions & 0 deletions packages/main/test/pages/PopoverOpenerNull.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>Popover opener null</title>

<script data-ui5-config type="application/json">
{
"language": "EN"
}
</script>
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
<script>
function init() {
const popoverWithoutOpener = document.getElementById("popoverWithoutOpener");
const popoverWithoutOpener2 = document.getElementById("popoverWithoutOpener2");
popoverWithoutOpener.opener = null;
popoverWithoutOpener2.opener = null;
setTimeout(() => {
popoverWithoutOpener2.opener = "btn1";
}, timeout = 1000);
}
</script>
</head>
<body onload="init()">
<ui5-button id="btn1" style="margin-top: 100px">Open Popover</ui5-button>
<ui5-popover id="popoverWithoutOpener" open>Popover</ui5-popover>
<ui5-popover id="popoverWithoutOpener2" open opener="btn1">Popover open</ui5-popover>
</body>
</html>
Loading