From 6e4a156a183befd309dffe4d7a91964bbcf177d5 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Thu, 17 Dec 2020 11:16:43 +0200
Subject: [PATCH] feat(ui5-mcb-item): implement stable-dom-ref property (#2418)

---
 packages/main/src/MultiComboBox.js         | 6 ++++++
 packages/main/src/MultiComboBoxItem.js     | 9 +++++++++
 packages/main/src/MultiComboBoxPopover.hbs | 9 ++++++++-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
index 91fe5bf6cd75..15c6e0b181fa 100644
--- a/packages/main/src/MultiComboBox.js
+++ b/packages/main/src/MultiComboBox.js
@@ -338,6 +338,12 @@ const metadata = {
  * <li> Backspace -  deletes the token and focus the next token. </li>
  * </ul>
  *
+ * In the context of <code>ui5-multi-combobox</code>, you can provide a custom stable DOM ref for:
+ * <ul>
+ * <li>Every <code>ui5-mcb-item</code> that you provide.
+ * Example: <code><ui5-mcb-item stable-dom-ref="item1"></ui5-mcb-item></code></li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/MultiComboBox";</code>
diff --git a/packages/main/src/MultiComboBoxItem.js b/packages/main/src/MultiComboBoxItem.js
index 476743aefeee..17ab6497046b 100644
--- a/packages/main/src/MultiComboBoxItem.js
+++ b/packages/main/src/MultiComboBoxItem.js
@@ -13,6 +13,15 @@ const metadata = {
 		 * @public
 		 */
 		selected: { type: Boolean },
+
+		/**
+		 * Defines the stable selector that you can use via getStableDomRef method.
+		 * @public
+		 * @since 1.0.0-rc.10
+		 */
+		stableDomRef: {
+			type: String,
+		},
 	},
 };
 
diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
index 2bf91731cdb8..f21132beee62 100644
--- a/packages/main/src/MultiComboBoxPopover.hbs
+++ b/packages/main/src/MultiComboBoxPopover.hbs
@@ -67,7 +67,14 @@
 
 	<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
 		{{#each _filteredItems}}
-				<ui5-li type="{{../_listItemsType}}" ?selected={{this.selected}} data-ui5-token-id="{{this._id}}">{{this.text}}</ui5-li>
+				<ui5-li
+					type="{{../_listItemsType}}"
+					?selected={{this.selected}}
+					data-ui5-token-id="{{this._id}}"
+					data-ui5-stable="{{this.stableDomRef}}"
+				>
+					{{this.text}}
+				</ui5-li>
 		{{/each}}
 	</ui5-list>