From 97f78b1d744e3418d3d3621e7d5eb2ad31838e80 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Fri, 18 Apr 2025 00:49:35 +0200
Subject: [PATCH] Fix input search trigger text changed

---
 .../Components/Search/SearchInput.razor       |  5 ++--
 .../Components/Search/SearchInput.razor.cs    | 24 +++++++++++--------
 .../Components/Search/SearchInput.razor.js    | 19 ---------------
 .../GameIdeas.BlazorApp/wwwroot/index.html    |  1 -
 4 files changed, 17 insertions(+), 32 deletions(-)
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.js

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
index 1fe279c..5c1e7f6 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
@@ -2,14 +2,15 @@
 @using GameIdeas.Shared.Constants
 
 <div class="search-container">
-    <input @ref=InputText
-           id="searchInput"
+    <input id="searchInput"
            type="text"
            class="search-field"
            placeholder="@Placeholder"
            disabled="@IsDisable"
            style="@(IsDisable ? "pointer-events: none" : "")"
            @bind=@Text
+           @bind:event="oninput"
+           @bind:after="HandleTextChanged"
            @onfocusin=HandleFocusIn/>
 
     <div class="buttons">
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
index 97a2e29..d9e250a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
@@ -1,13 +1,10 @@
 using GameIdeas.BlazorApp.Shared.Constants;
-using GameIdeas.Shared.Constants;
 using Microsoft.AspNetCore.Components;
-using Microsoft.JSInterop;
 
 namespace GameIdeas.BlazorApp.Shared.Components.Search;
 
 public partial class SearchInput
 {
-    [Inject] private IJSRuntime Js { get; set; } = default!;
     [Parameter] public string? Text { get; set; }
     [Parameter] public string? Placeholder { get; set; }
     [Parameter] public bool IsDisable { get; set; }
@@ -17,13 +14,20 @@ public partial class SearchInput
     [Parameter] public EventCallback FocusIn { get; set; }
     [Parameter] public SearchInputIcon Icon { get; set; }
 
-    private ElementReference InputText;
+    private System.Timers.Timer? Timer;
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    protected override void OnInitialized()
     {
         Text = string.Empty;
-        await Js.InvokeVoidAsync("addStopWriteListener", DotNetObjectReference.Create(this));
-        await base.OnAfterRenderAsync(firstRender);
+        Timer = new()
+        {
+            Interval = 1000,
+            AutoReset = false,
+        };
+
+        Timer.Elapsed += async (_, _) => await TextChanged.InvokeAsync(Text);
+
+        base.OnInitialized();
     }
 
     public void SetText(string str)
@@ -31,10 +35,10 @@ public partial class SearchInput
         Text = str;
     }
 
-    [JSInvokable]
-    public async Task HandleTextEnd()
+    private void HandleTextChanged()
     {
-        await TextChanged.InvokeAsync(Text);
+        Timer?.Stop();
+        Timer?.Start();
     }
 
     private async Task HandleClearClicked()
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.js b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.js
deleted file mode 100644
index d9ba0d9..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.js
+++ /dev/null
@@ -1,19 +0,0 @@
-function debounce(func, delay, dotNetReference) {
-    let timeoutId;
-    return function () {
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(() => {
-            func.apply(this, dotNetReference);
-        }, delay);
-    };
-}
-    
-function handleInputStop(dotNetReference) {
-    console.log("L'utilisateur a arrêté de taper.");
-    //dotNetReference.invokeMethodAsync("HandleTextEnd");
-}
-
-function addStopWriteListener(dotNetReference) { 
-    const input = document.getElementById('searchInput');
-    input.addEventListener('input', debounce(handleInputStop, 1000, dotNetReference)); // 500ms après la dernière frappe
-}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
index 2b4ad65..4400e66 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
@@ -27,7 +27,6 @@
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
     <script src="Shared/Components/BackdropFilter/BackdropFilter.razor.js"></script>
-    <script src="Shared/Components/Search/SearchInput.razor.js"></script>
     <script src="Pages/Games/Components/GameCreationForm.razor.js"></script>
 </body>