From d912f27f2e423a4c26c7aa8cccdbae83da5bb931 Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Tue, 23 Apr 2024 15:30:32 +0200
Subject: [PATCH] show item index status

---
 .../search/search-modal/search-modal.element.ts      | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
index cfaa529744..c462a0b08f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
@@ -161,8 +161,15 @@ export class UmbSearchModalElement extends UmbLitElement {
 	async #setSearchItemNavIndex(index: number) {
 		await this.updateComplete;
 
+		const prevElement = this.shadowRoot?.querySelector(
+			`a[data-item-index="${this.#searchItemNavIndex}"]`,
+		) as HTMLElement | null;
+		prevElement?.classList.remove('active');
+
 		this.#searchItemNavIndex = index;
+
 		const element = this.shadowRoot?.querySelector(`a[data-item-index="${index}"]`) as HTMLElement | null;
+		element?.classList.add('active');
 
 		if (!element) return;
 		if (!this._searchResults.length) return;
@@ -419,6 +426,11 @@ export class UmbSearchModalElement extends UmbLitElement {
 				outline-offset: -3px;
 				display: flex;
 			}
+			.search-item.active:not(:focus-within) {
+				outline: 2px solid var(--uui-color-border);
+				border-radius: 6px;
+				outline-offset: -4px;
+			}
 		`,
 	];
 }