Fix input search trigger text changed

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">

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()

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.js

@@ -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
-}

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>