fix(ui5-menu): fix runtime js error on getElementById call

- adds a check to guarantee getElementById is called only if existing
SAP · Dec 18, 2023 · a5af85f · a5af85f
1 parent 630f73c
commit a5af85f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 49 deletions.
diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts
@@ -384,10 +384,9 @@ class Menu extends UI5Element {
 		if (!this.opener) {
 			return;
 		}
-		if (this.open) {
-			const rootNode = this.getRootNode() as Document;
-			const opener = this.opener instanceof HTMLElement ? this.opener : rootNode && rootNode.getElementById(this.opener);
 
+		if (this.open) {
+			const opener = this.getOpener();
 			if (opener) {
 				this.showAt(opener);
 			}
@@ -444,6 +443,11 @@ class Menu extends UI5Element {
 		return this._popover;
 	}
 
+	getOpener() {
+		const rootNode = this.getRootNode() as Document;
+		return this.opener instanceof HTMLElement ? this.opener : (rootNode && rootNode.getElementById && rootNode.getElementById(this.opener));
+	}
+
 	_navigateBack() {
 		const parentMenuItem = this._parentItemsStack.pop();
 

diff --git a/packages/main/test/pages/Menu.html b/packages/main/test/pages/Menu.html
@@ -12,7 +12,7 @@
 	<link rel="stylesheet" type="text/css" href="./styles/Menu.css">
 </head>
 
-<body class="responsivepopover2auto">
+<body class="bg">
 	<ui5-button id="btnOpen">Open Menu</ui5-button> <br/>
 	<ui5-menu id="menu" header-text="My ui5-menu">
 
@@ -39,51 +39,32 @@
 		<ui5-menu-item text="Exit" icon="journey-arrive"></ui5-menu-item>
 	</ui5-menu>
 
-	<header class="header">
-		<h3 class="header-title">Clicked menu item text</h3>
-	</header>
-
-	<div class="samples-margin">
-		<ui5-input id="selectionInput"></ui5-input>
-	</div>
-
-	<header class="header">
-		<h3 class="header-title">Text Direction</h3>
-	</header>
-	<div class="samples-margin">
-		<ui5-switch id="direction" text-on="RTL" text-off="LTR"></ui5-switch>
-	</div>
-
-	<header class="header">
-		<h3 class="header-title">Prevent "before-open" event</h3>
-	</header>
-	<div class="samples-margin">
-		<ui5-switch id="preventBeforeOpen" text-on="Yes" text-off="No"></ui5-switch>
-	</div>
-
-	<header class="header">
-		<h3 class="header-title">Prevent "before-close" event</h3>
-	</header>
-	<div class="samples-margin">
-		<ui5-switch id="preventBeforeClose" text-on="Yes" text-off="No"></ui5-switch>
-	</div>
-
-	<header class="header">
-		<h3 class="header-title">open/opener</h3>
-	</header>
-	<div class="samples-margin">
-		<ui5-button id="btnAddOpener">Add opener</ui5-button>
-		<ui5-button id="btnRemoveOpener">Remove opener</ui5-button>
-		<ui5-toggle-button id="btnToggleOpen">Toggle open</ui5-toggle-button> <br/>
-		<ui5-input id="openerInput"></ui5-input>
-	</div>
-
-	<header class="header">
-		<h3 class="header-title">Event logger</h3>
-	</header>
-	<div class="samples-margin">
-		<ui5-input id="eventLogger" style="width: 100%;"></ui5-input>
-	</div>
+	<ui5-title level="H5" class="header-title">Clicked menu item text</ui5-title>
+	<ui5-input id="selectionInput"></ui5-input>
+
+	<ui5-title level="H5" class="header-title">Text Direction</ui5-title>
+	<ui5-switch id="direction" text-on="RTL" text-off="LTR"></ui5-switch>
+
+	<ui5-title level="H5" class="header-title">Prevent "before-open" event</ui5-title>
+	<ui5-switch id="preventBeforeOpen" text-on="Yes" text-off="No"></ui5-switch>
+
+	<ui5-title level="H5" class="header-title">Prevent "before-close" event</ui5-title>
+	<ui5-switch id="preventBeforeClose" text-on="Yes" text-off="No"></ui5-switch>
+
+	<ui5-title level="H5" class="header-title">open/opener</ui5-title>
+	<ui5-button id="btnAddOpener">Add opener</ui5-button>
+	<ui5-button id="btnRemoveOpener">Remove opener</ui5-button>
+	<ui5-toggle-button id="btnToggleOpen">Toggle open</ui5-toggle-button> <br/>
+	<ui5-input id="openerInput"></ui5-input>
+
+	<ui5-title level="H5" class="header-title">Event logger</ui5-title>
+	<ui5-input id="eventLogger" style="width: 100%;"></ui5-input>
+
+	<ui5-title level="H5" class="header-title">Test menu and opener removal</ui5-title>
+	<ui5-button id="buttonA">Opens menu and removes it after 100ms</ui5-button>
+	<ui5-menu id="menuWithoutOpener">
+		<ui5-menu-item text="New File" accessible-name="Opens a file explorer" additional-text="Ctrl+Alt+Shift+N" icon="add-document"></ui5-menu-item>
+	</ui5-menu>
 
 	<script>
 		btnOpen.accessibilityAttributes = {

diff --git a/packages/main/test/pages/styles/Menu.css b/packages/main/test/pages/styles/Menu.css
@@ -1,3 +1,11 @@
 .height100percent {
     height: 100%
+}
+
+.bg {
+    background-color: var(--sapBackgroundColor);
+}
+
+.header-title {
+    margin-block-start: 0.5rem;  
 }