From 9774939d08eeb756c213562523bd62911db04351 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 31 Mar 2025 15:01:45 -0700
Subject: [PATCH] fixes search input

---
 src/components/SearchInput/SearchInput.svelte | 14 +++++-
 src/components/Table/Table.svelte             | 48 ++++++++++---------
 src/components/Table/utils.ts                 | 15 ++++--
 3 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
index c89a83dc..929a0e85 100644
--- a/src/components/SearchInput/SearchInput.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -6,15 +6,23 @@
   interface Props {
     /** The placeholder text that appears in the search box.*/
     searchPlaceholder?: string;
+
+    onsearch?: (newValue: string) => void;
   }
 
-  let { searchPlaceholder = 'Search...' }: Props = $props();
+  let { searchPlaceholder = 'Search...', onsearch }: Props = $props();
 
   let value = $state('');
   let active = $derived(value !== '');
 
   function clear() {
     value = '';
+    if (onsearch) onsearch(value); // Call the prop to update the parent when cleared
+  }
+
+  function oninput(event: Event) {
+    value = (event.target as HTMLInputElement).value;
+    if (onsearch) onsearch(value); // Update the parent on every input change
   }
 </script>
 
@@ -22,12 +30,14 @@
   <div class="search--icon absolute">
     <MagnifyingGlass />
   </div>
+
   <input
     id="search--input"
     class="search--input body-caption pl-8"
     type="text"
     placeholder={searchPlaceholder}
     bind:value
+    {oninput}
   />
   <div
     class="search--x absolute"
@@ -72,4 +82,4 @@
       }
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index 600a53e2..e961a7f4 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -1,5 +1,5 @@
 <!-- @component `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-table--docs) -->
-<script lang="ts" generics="T">
+<script lang="ts">
   /** Import local helpers */
   import Block from '../Block/Block.svelte';
   import Pagination from './components/Pagination.svelte';
@@ -69,7 +69,7 @@
     pageSize = 25,
     searchable = false,
     searchPlaceholder = 'Search in table',
-    filterField,
+    filterField = '',
     filterLabel,
     sortable = false,
     sortField = Object.keys(data[0])[0],
@@ -116,8 +116,16 @@
     showAll = !showAll;
   }
 
-  function handleSearchInput(event) {
-    searchText = event.detail.value;
+  // function handleSearchInput(event: CustomEvent<string>) {
+  //   searchText = event.detail;
+
+  //   console.log('searchText', searchText);
+  //   pageNumber = 1;
+  // }
+
+  /** Filters table data based on the input value in the search bar */
+  function handleSearchInput(newSearchText: string) {
+    searchText = newSearchText;
     pageNumber = 1;
   }
 
@@ -156,9 +164,21 @@
     }
   }
 
+  /** Add the `searchStr` field to data */
+  let searchableData = $derived.by(() => {
+    return data.map((d) => {
+      return {
+        ...d,
+        searchStr: includedFields
+          .map((field) => d[field])
+          .join(' ')
+          .toLowerCase(),
+      };
+    });
+  });
   /** Set up the data pipeline */
   let filteredData = $derived.by(() =>
-    filterArray(data, searchText, filterField, filterValue)
+    filterArray(searchableData, searchText, filterField, filterValue)
   );
 
   let sortedData = $derived.by(() =>
@@ -174,19 +194,6 @@
     }
     return sortedData;
   });
-
-  /** Add the `searchStr` field to data */
-  let searchableData = $derived.by(() => {
-    return data.map((d) => {
-      return {
-        ...d,
-        searchStr: includedFields
-          .map((field) => d[field])
-          .join(' ')
-          .toLowerCase(),
-      };
-    });
-  });
 </script>
 
 <Block {width} {id} class="fmy-6 {cls}">
@@ -212,10 +219,7 @@
             {/if}
             {#if searchable}
               <div class="table--header--search">
-                <SearchInput
-                  bind:searchPlaceholder
-                  on:search={handleSearchInput}
-                />
+                <SearchInput {searchPlaceholder} onsearch={handleSearchInput} />
               </div>
             {/if}
           </nav>
diff --git a/src/components/Table/utils.ts b/src/components/Table/utils.ts
index 5892ab6d..be9357e5 100644
--- a/src/components/Table/utils.ts
+++ b/src/components/Table/utils.ts
@@ -1,8 +1,12 @@
-export function filterArray<T extends { searchStr: string }>(
-  data: T[],
+type FilterableDatum<T extends Record<string, unknown>> = T & {
+  searchStr: string;
+};
+
+export function filterArray<T extends Record<string, unknown>>(
+  data: FilterableDatum<T>[],
   searchText: string,
-  filterField: keyof T,
-  filterValue: T[keyof T]
+  filterField: keyof FilterableDatum<T>,
+  filterValue: FilterableDatum<T>[keyof FilterableDatum<T>]
 ) {
   if (searchText) {
     data = data.filter((item) => {
@@ -12,13 +16,14 @@ export function filterArray<T extends { searchStr: string }>(
 
   if (filterValue) {
     data = data.filter((item) => {
+      if (!filterField) return true; // or handle the undefined case as appropriate
+
       return item[filterField] === filterValue;
     });
   }
 
   return data;
 }
-
 export function paginateArray<T>(
   array: T[],
   pageSize: number,