feat(ui5-mcb-item): implement stable-dom-ref property (#2418)

Author: fifoosid

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>

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,
+		},
 	},
 };
 

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>