From 2248eb77f9ba7e1102ac068276e4841bd9cbab53 Mon Sep 17 00:00:00 2001
From: Aditya Garud <153842990+yashranaway@users.noreply.github.com>
Date: Sat, 4 Oct 2025 23:29:28 +0530
Subject: [PATCH] Feature/preselect first search result item in assistant
 (#5656)

* Preselect first search result item in assistant

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../src/lib/assistant/assistant.component.ts  | 63 +++++++++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a58a725c..008ec3055 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Localized the number formatting in the settings dialog to customize the rule thresholds of the _X-ray_ page
+- Improved the usability of the assistant by preselecting the first search result
 - Improved the usability of the _Cancel_ / _Close_ buttons in the create watchlist item dialog
 - Refactored the `fireWealth` from `number` type to a structured object in the summary of the portfolio details endpoint
 - Refactored the _Open Startup_ (`/open`) page to standalone
diff --git a/libs/ui/src/lib/assistant/assistant.component.ts b/libs/ui/src/lib/assistant/assistant.component.ts
index 57c440bdb..3fc1cc232 100644
--- a/libs/ui/src/lib/assistant/assistant.component.ts
+++ b/libs/ui/src/lib/assistant/assistant.component.ts
@@ -169,6 +169,8 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
   };
   public tags: Filter[] = [];
 
+  private readonly PRESELECTION_DELAY = 100;
+
   private filterTypes: Filter['type'][] = [
     'ACCOUNT',
     'ASSET_CLASS',
@@ -176,7 +178,9 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
     'SYMBOL',
     'TAG'
   ];
+
   private keyManager: FocusKeyManager<GfAssistantListItemComponent>;
+  private preselectionTimeout: ReturnType<typeof setTimeout>;
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
@@ -344,6 +348,9 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
       .subscribe({
         next: (searchResults) => {
           this.searchResults = searchResults;
+
+          this.preselectFirstItem();
+
           this.changeDetectorRef.markForCheck();
         },
         error: (error) => {
@@ -585,6 +592,10 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
   }
 
   public ngOnDestroy() {
+    if (this.preselectionTimeout) {
+      clearTimeout(this.preselectionTimeout);
+    }
+
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
   }
@@ -595,6 +606,58 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
     });
   }
 
+  private getFirstSearchResultItem() {
+    if (this.searchResults.quickLinks?.length > 0) {
+      return this.searchResults.quickLinks[0];
+    }
+
+    if (this.searchResults.accounts?.length > 0) {
+      return this.searchResults.accounts[0];
+    }
+
+    if (this.searchResults.holdings?.length > 0) {
+      return this.searchResults.holdings[0];
+    }
+
+    if (this.searchResults.assetProfiles?.length > 0) {
+      return this.searchResults.assetProfiles[0];
+    }
+
+    return null;
+  }
+
+  private preselectFirstItem() {
+    if (this.preselectionTimeout) {
+      clearTimeout(this.preselectionTimeout);
+    }
+
+    this.preselectionTimeout = setTimeout(() => {
+      if (!this.isOpen || !this.searchFormControl.value) {
+        return;
+      }
+
+      const firstItem = this.getFirstSearchResultItem();
+
+      if (!firstItem) {
+        return;
+      }
+
+      for (const item of this.assistantListItems) {
+        item.removeFocus();
+      }
+
+      this.keyManager.setFirstItemActive();
+
+      const currentFocusedItem = this.getCurrentAssistantListItem();
+
+      if (currentFocusedItem) {
+        currentFocusedItem.focus();
+      }
+
+      this.changeDetectorRef.markForCheck();
+    }, this.PRESELECTION_DELAY);
+  }
+
   private searchAccounts(aSearchTerm: string): Observable<ISearchResultItem[]> {
     return this.dataService
       .fetchAccounts({