fix(ui5-cb-item): return the DOM reference of the list item (#8872)

* fix(ui5-cb-item): return the DOM reference of the list item fixes: #8841
SAP · May 8, 2024 · 2553213 · 2553213
1 parent 1a133b2
commit 2553213
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 7 deletions.
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
@@ -89,12 +89,13 @@ const SKIP_ITEMS_SIZE = 10;
  * Interface for components that may be slotted inside a `ui5-combobox`
  * @public
  */
-interface IComboBoxItem {
+interface IComboBoxItem extends UI5Element {
 	text: string,
 	focused: boolean,
 	isGroupItem: boolean,
 	selected?: boolean,
 	additionalText?: string,
+	stableDomRef: string,
 }
 
 type ValueStateAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
@@ -412,7 +413,7 @@ class ComboBox extends UI5Element {
 		this._userTypedValue = "";
 	}
 
-	onBeforeRendering() {
+	async onBeforeRendering() {
 		const popover: Popover | undefined = this.valueStatePopover;
 
 		this.FormSupport = getFeature<typeof FormSupportT>("FormSupport");
@@ -437,6 +438,11 @@ class ComboBox extends UI5Element {
 		this._initialRendering = false;
 
 		this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
+
+		const suggestionsPopover = await this._getPicker();
+		this.items.forEach(item => {
+			item._getRealDomRef = () => suggestionsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
+		});
 	}
 
 	get iconsCount() {

diff --git a/packages/main/src/ComboBoxGroupItem.ts b/packages/main/src/ComboBoxGroupItem.ts
@@ -38,6 +38,10 @@ class ComboBoxGroupItem extends UI5Element implements IComboBoxItem {
 		get isGroupItem(): boolean {
 			return true;
 		}
+
+		get stableDomRef() {
+			return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+		}
 }
 
 ComboBoxGroupItem.define();

diff --git a/packages/main/src/ComboBoxItem.ts b/packages/main/src/ComboBoxItem.ts
@@ -52,6 +52,10 @@ class ComboBoxItem extends UI5Element implements IComboBoxItem {
 	get isGroupItem(): boolean {
 		return false;
 	}
+
+	get stableDomRef() {
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	}
 }
 
 ComboBoxItem.define();

diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
@@ -125,6 +125,7 @@
 			.mappedItem={{this}}
 			?selected={{this.selected}}
 			?focused={{this.focused}}
+			data-ui5-stable="{{this.stableDomRef}}"
 	>
 		{{this.text}}
 	</ui5-li>

diff --git a/packages/main/src/MultiComboBoxItem.ts b/packages/main/src/MultiComboBoxItem.ts
@@ -22,10 +22,6 @@ class MultiComboBoxItem extends ComboBoxItem implements IMultiComboBoxItem {
 	@property({ type: Boolean })
 	declare selected: boolean;
 
-	get stableDomRef() {
-		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
-	}
-
 	get isMultiComboBoxItem() {
 		return true;
 	}

diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
@@ -44,7 +44,7 @@
 		<ui5-button id="value-set-btn">Set value</ui5-button>
 
 		<ui5-combobox id="combo2" class="combobox2auto" accessible-name="Select destination:">
-			<ui5-cb-item text="Algeria"></ui5-cb-item>
+			<ui5-cb-item text="Algeria" id="cbi"></ui5-cb-item>
 			<ui5-cb-item text="Argentina"></ui5-cb-item>
 			<ui5-cb-item text="Australia"></ui5-cb-item>
 			<ui5-cb-item text="Austria"></ui5-cb-item>

diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js
@@ -1231,4 +1231,15 @@ describe("Keyboard navigation", async () => {
 
 		assert.ok(isInVisibleArea, "Item should be displayed in the viewport");
 	});
+
+	it ("Should get the physical DOM reference for the cb item", async () => {
+		await browser.url(`test/pages/ComboBox.html`);
+
+		const cbItemDomRef = await browser.executeAsync(done => {
+			return done(document.getElementById("cbi").getDomRef());
+		});
+
+		assert.ok(cbItemDomRef, "ComboBoxItem's DOM reference exists");
+	});
+
 });