fix(ui5-shellbar): fix menuItems cloning (#1457)

ilhan007 · web-flow · commit f4d254797472 · 2020-04-09T18:52:45.000+03:00
diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js
@@ -380,13 +380,15 @@ class ShellBar extends UI5Element {
 			},
 		};
 
+		this.menuItemsObserver = new MutationObserver(() => {
+			this._updateClonedMenuItems();
+		});
+
 		this._header = {
 			press: event => {
+				this._updateClonedMenuItems();
+
 				if (this.menuItems.length) {
-					this._menuPopoverItems = [];
-					this.menuItems.forEach(item => {
-						this._menuPopoverItems.push(item.textContent);
-					});
 					this.updateStaticAreaItemContentDensity();
 					this.menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
 				}
@@ -479,6 +481,8 @@ class ShellBar extends UI5Element {
 
 			return isHidden && isSet && !isOverflowIcon;
 		});
+
+		this._observeMenuItems();
 	}
 
 	onAfterRendering() {
@@ -641,6 +645,7 @@ class ShellBar extends UI5Element {
 	}
 
 	onExitDOM() {
+		this.menuItemsObserver.disconnect();
 		ResizeHandler.deregister(this, this._handleResize);
 	}
 
@@ -819,6 +824,30 @@ class ShellBar extends UI5Element {
 		}
 	}
 
+	_updateClonedMenuItems() {
+		this._menuPopoverItems = [];
+
+		this.menuItems.forEach(item => {
+			// clone the menuItem and remove the slot="menuItems",
+			// otherwise would not be slotted in the internal ui5-li
+			const clonedItem = item.cloneNode(true);
+			clonedItem.removeAttribute("slot");
+
+			this._menuPopoverItems.push(clonedItem);
+		});
+	}
+
+	_observeMenuItems() {
+		this.menuItems.forEach(item => {
+			this.menuItemsObserver.observe(item, {
+				characterData: true,
+				childList: true,
+				subtree: true,
+				attributes: true,
+			});
+		});
+	}
+
 	async _getResponsivePopover() {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
 		this.overflowPopover = staticAreaItem.querySelector(".ui5-shellbar-overflow-popover");
diff --git a/packages/fiori/src/ShellBarPopover.hbs b/packages/fiori/src/ShellBarPopover.hbs
@@ -1,7 +1,7 @@
 <ui5-popover class="ui5-shellbar-menu-popover" placement-type="Bottom">
 	<ui5-list separators="None" mode="SingleSelect" @ui5-itemPress={{_menuItemPress}}>
 		{{#each _menuPopoverItems}}
-			<ui5-li>{{ this }}</ui5-li>
+			{{ this }}
 		{{/each}}
 	</ui5-list>
 </ui5-popover>
diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html
@@ -122,11 +122,11 @@
 
 	<ui5-input slot="searchField"></ui5-input>
 
-	<ui5-li id="menu-item-1" slot="menuItems">Application 1</ui5-li>
-	<ui5-li id="menu-item-2" slot="menuItems">Application 2</ui5-li>
-	<ui5-li slot="menuItems">Application 3</ui5-li>
-	<ui5-li slot="menuItems">Application 4</ui5-li>
-	<ui5-li slot="menuItems">Application 5</ui5-li>
+	<ui5-li id="menu-item-1" slot="menuItems" data-key="key1">Application 1</ui5-li>
+	<ui5-li id="menu-item-2" slot="menuItems" data-key="key2">Application 2</ui5-li>
+	<ui5-li slot="menuItems" data-key="key3">Application 3</ui5-li>
+	<ui5-li slot="menuItems" data-key="key4">Application 4</ui5-li>
+	<ui5-li slot="menuItems" data-key="key5">Application 5</ui5-li>
 </ui5-shellbar>
 
 <section class="ui5-content-density-compact">
@@ -179,6 +179,7 @@ <h3>ShellBar in Compact</h3>
 </ui5-popover>
 
 <ui5-input id="press-input" style="margin-top: 2rem;"></ui5-input>
+<ui5-input id="press-data" style="margin-top: 2rem;"></ui5-input>
 <ui5-input id="press-input2" style="margin-top: 2rem;"></ui5-input>
 
 
@@ -201,6 +202,23 @@ <h3>ShellBar in Compact</h3>
 	</ui5-input>
 </ui5-shellbar>
 
+<ui5-title>Menu Items</ui5-title>
+
+<ui5-label>value</ui5-label><ui5-input id="result-value"></ui5-input><br>
+<ui5-label>key</ui5-label><ui5-input id="result-key"></ui5-input>
+
+<ui5-shellbar
+		id="menuItemsSB"
+		primary-title="Menu Items"
+>
+	<ui5-li id="mi-1" slot="menuItems" data-key="key1">App 1</ui5-li>
+	<ui5-li id="mi-2" slot="menuItems" data-key="key2">App 2</ui5-li>
+	<ui5-li id="mi-3"slot="menuItems" data-key="key3">App 3</ui5-li>
+	<ui5-li id="mi-4"slot="menuItems" data-key="key4">App 4</ui5-li>
+</ui5-shellbar>
+
+
+
 <script>
 	mySearch.addEventListener("suggestionItemSelect", function (event) {
 		 console.log(event);
@@ -233,11 +251,19 @@ <h3>ShellBar in Compact</h3>
 	});
 
 	shellbar.addEventListener("ui5-menuItemClick", function(event) {
-		window["press-input"].value = event.detail.item.textContent;
+		var item = event.detail.item;
+		window["press-input"].value = item.textContent;
+		window["press-data"].value = item.getAttribute("data-key");
+	});
+
+	menuItemsSB.addEventListener("ui5-menuItemClick", function(event) {
+		var item = event.detail.item;
+		window["result-value"].value = item.textContent;
+		window["result-key"].value = item.getAttribute("data-key");
 	});
 
 	["disc", "call"].forEach(function(id) {
-        var currenItem = window[id][0] || window[id];
+		var currenItem = window[id][0] || window[id];
 		currenItem.addEventListener("ui5-itemClick", function(event) {
 			event.preventDefault();
 			window["press-input"].value = event.target.id;
diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js
@@ -254,22 +254,25 @@ describe("Component Behavior", () => {
 				assert.strictEqual(input.getValue(), "CoPilot", "Input value is set by click event of CoPilot");
 			});
 
-			it("tests menuItemPress event", () => {
+			it("tests menuItemClick event", () => {
 				const primaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button");
 				const staticAreaItemClassName = browser.getStaticAreaItemClassName("#shellbar")
 				const menuPopover = browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover");
 				const firstMenuItem = menuPopover.$("ui5-list > ui5-li");
 				const secondMenuItem = menuPopover.$("ui5-list > ui5-li:nth-child(2)");
 				const input = browser.$("#press-input");
+				const inputData = browser.$("#press-data");
 
 				primaryTitle.click();
 				firstMenuItem.click();
 
 				assert.strictEqual(input.getValue(), "Application 1", "Input value is set by click event of the first menu item");
+				assert.strictEqual(inputData.getValue(), "key1", "The user defined attributes are available.");
 
 				secondMenuItem.click();
 
 				assert.strictEqual(input.getValue(), "Application 2", "Input value is set by click event of the second menu item");
+				assert.strictEqual(inputData.getValue(), "key2", "The user defined attributes are available.");
 			});
 
 			it("tests if searchfield toggles when clicking on search icon", () => {
