From 98165ace411529c005a3d9f68706efb4fbc5f4ec Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Fri, 16 Oct 2020 14:22:01 +0300
Subject: [PATCH 1/2] feat(ui5-option): provide stabledomref

---
 packages/base/src/UI5Element.js     | 12 +++++++++---
 packages/main/src/Option.js         |  9 +++++++++
 packages/main/src/Select.js         | 10 ++++++++++
 packages/main/src/SelectPopover.hbs |  1 +
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/base/src/UI5Element.js b/packages/base/src/UI5Element.js
index a7e45618054e..16ea2b83e1a7 100644
--- a/packages/base/src/UI5Element.js
+++ b/packages/base/src/UI5Element.js
@@ -638,12 +638,18 @@ class UI5Element extends HTMLElement {
 	}
 
 	/**
-	 * Use this method in order to get a reference to element in the shadow root of a web component
+	 * Use this method in order to get a reference to an element in the shadow root of the web component or the static area item of the component
 	 * @public
+	 * @method
 	 * @param {String} refName Defines the name of the stable DOM ref
 	 */
-	getStableDomRef(refName) {
-		return this.getDomRef().querySelector(`[data-ui5-stable=${refName}]`);
+	async getStableDomRef(refName) {
+		const staticAreaItemDomRef = await this.getStaticAreaItemDomRef();
+
+		const result = staticAreaItemDomRef.querySelector(`[data-ui5-stable=${refName}]`)
+		|| this.getDomRef().querySelector(`[data-ui5-stable=${refName}]`);
+		
+		return result;
 	}
 
 	/**
diff --git a/packages/main/src/Option.js b/packages/main/src/Option.js
index fe9f23dd29c6..2e1152edd2af 100644
--- a/packages/main/src/Option.js
+++ b/packages/main/src/Option.js
@@ -42,6 +42,15 @@ const metadata = {
 		value: {
 			type: String,
 		},
+
+		/**
+		 * Defines the stable selector that you can use via getStableDomRef method.
+		 * @public
+		 * @since 1.0.0-rc.10
+		 */
+		stableDomRef: {
+			type: String,
+		},
 	},
 
 	events: /** @lends sap.ui.webcomponents.main.Option.prototype */ {},
diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js
index a55f0a652557..d99690061336 100644
--- a/packages/main/src/Select.js
+++ b/packages/main/src/Select.js
@@ -244,6 +244,15 @@ const metadata = {
  * Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys
  * to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys.
  * <br>
+ * 
+ * <h3>Stable DOM Refs</h3>
+ *
+ * In the context of <code>ui5-select</code>, you can provide a custom stable DOM refs for:
+ * <ul>
+ * <li>Every <code>ui5-option</code> that you provide.
+ * Example: <code><ui5-option stable-dom-ref="option1"></ui5-option></code></li>
+ * </ul>
+ * 
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents/dist/Select";</code>
  * <br>
@@ -362,6 +371,7 @@ class Select extends UI5Element {
 				value: opt.value,
 				textContent: opt.textContent,
 				id: opt._id,
+				stableDomRef: opt.stableDomRef,
 			};
 		});
 
diff --git a/packages/main/src/SelectPopover.hbs b/packages/main/src/SelectPopover.hbs
index a15a7a1f34a1..0e4af3adacaa 100644
--- a/packages/main/src/SelectPopover.hbs
+++ b/packages/main/src/SelectPopover.hbs
@@ -51,6 +51,7 @@
 					icon="{{this.icon}}"
 					?selected="{{this.selected}}"
 					?aria-selected="{{this.selected}}"
+					data-ui5-stable="{{this.stableDomRef}}"
 				>
 					{{this.textContent}}
 				</ui5-li>

From ba032636b95c9e3802a7b30b206c0ea7440355a2 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Thu, 17 Dec 2020 11:20:19 +0200
Subject: [PATCH 2/2] fix typo

---
 packages/main/src/Select.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js
index e23b3880c561..bf7a620fe94f 100644
--- a/packages/main/src/Select.js
+++ b/packages/main/src/Select.js
@@ -247,7 +247,7 @@ const metadata = {
  *
  * <h3>Stable DOM Refs</h3>
  *
- * In the context of <code>ui5-select</code>, you can provide a custom stable DOM refs for:
+ * In the context of <code>ui5-select</code>, you can provide a custom stable DOM ref for:
  * <ul>
  * <li>Every <code>ui5-option</code> that you provide.
  * Example: <code><ui5-option stable-dom-ref="option1"></ui5-option></code></li>