From 461f571005a78644e6f3dc38073e66d24a384e36 Mon Sep 17 00:00:00 2001
From: Kyrylo Petrov <kpetrov@exoft.net>
Date: Tue, 3 Jun 2025 15:33:04 +0300
Subject: [PATCH] fix(addons-profile): fix input

---
 src/app/features/project/addons/addons.component.html | 8 ++++----
 src/app/features/project/addons/addons.component.ts   | 9 +++++----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/app/features/project/addons/addons.component.html b/src/app/features/project/addons/addons.component.html
index 1beaf7a06..718224bd3 100644
--- a/src/app/features/project/addons/addons.component.html
+++ b/src/app/features/project/addons/addons.component.html
@@ -50,8 +50,8 @@
           <div class="col-12 md:col-6 lg:col-9">
             <osf-search-input
               class="w-full"
-              [searchValue]="searchValue()"
-              (searchValueChange)="searchValue.set($event || '')"
+              [control]="searchValue"
+              (triggerSearch)="searchValue.setValue($event)"
               [placeholder]="'settings.addons.filters.search' | translate"
             />
           </div>
@@ -62,8 +62,8 @@
       <p-tabpanel [value]="AddonTabValue.CONNECTED_ADDONS" class="flex flex-column gap-5">
         <osf-search-input
           class="flex-1"
-          [searchValue]="searchValue()"
-          (searchValueChange)="searchValue.set($event || '')"
+          [control]="searchValue"
+          (triggerSearch)="searchValue.setValue($event)"
           [placeholder]="'settings.addons.filters.search' | translate"
         />
 
diff --git a/src/app/features/project/addons/addons.component.ts b/src/app/features/project/addons/addons.component.ts
index d4a356f7d..3b857108e 100644
--- a/src/app/features/project/addons/addons.component.ts
+++ b/src/app/features/project/addons/addons.component.ts
@@ -7,7 +7,7 @@ import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
 
 import { ChangeDetectionStrategy, Component, computed, effect, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { FormsModule } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { UserSelectors } from '@core/store/user';
 import {
@@ -38,6 +38,7 @@ import { ADDON_CATEGORY_OPTIONS, ADDON_TAB_OPTIONS, AddonCategoryValue, AddonTab
     Tabs,
     TranslatePipe,
     FormsModule,
+    ReactiveFormsModule,
   ],
   templateUrl: './addons.component.html',
   styleUrl: './addons.component.scss',
@@ -48,7 +49,7 @@ export class AddonsComponent {
   #store = inject(Store);
   protected readonly defaultTabValue = AddonTabValue.ALL_ADDONS;
   protected readonly isMobile = toSignal(inject(IS_XSMALL));
-  protected readonly searchValue = signal('');
+  protected readonly searchValue = new FormControl('');
   protected readonly selectedCategory = signal<string>(AddonCategoryValue.EXTERNAL_STORAGE_SERVICES);
   protected readonly selectedTab = signal<number>(this.defaultTabValue);
   protected readonly currentUser = select(UserSelectors.getCurrentUser);
@@ -60,7 +61,7 @@ export class AddonsComponent {
   protected readonly allAuthorizedAddons = computed(() => {
     const authorizedAddons = [...this.authorizedStorageAddons(), ...this.authorizedCitationAddons()];
 
-    const searchValue = this.searchValue().toLowerCase();
+    const searchValue = this.searchValue.value?.toLowerCase() ?? '';
     return authorizedAddons.filter((card) => card.displayName.includes(searchValue));
   });
 
@@ -79,7 +80,7 @@ export class AddonsComponent {
   );
 
   protected readonly filteredAddonCards = computed(() => {
-    const searchValue = this.searchValue().toLowerCase();
+    const searchValue = this.searchValue.value?.toLowerCase() ?? '';
     return this.currentAddonsState().filter((card) => card.externalServiceName.includes(searchValue));
   });