Focus Changes While Typing In Search By Key Stroke

[Larry]

I added the search by key stroke feature and while typing in the Search box, the focus keeps changing to the "

ShowAddNewRow" box.  I have included a video of this action.

Attachment: Syncfusion_Search_By_Key_Stroke_2442a66a.zip

[Larry]

Attached the Points.Razor file.

Attachment: Points_81a0bd5a.zip

[Larry]

This behavior is only when ShowAddNewRow="true".

[Naveen Palanivel]

Hi Larry,

Based on your query, we would like to clarify that when using the SearchAsync method of the Grid by an external textbox and button, the focus will shift to the Grid after performing the search. This behavior is expected when searching the Grid component using SearchAsync method. To resolve the reported issue and maintain the focus on the external textbox after performing the search, we recommend calling the FocusAsync method of the textbox. Please refer to the provided code snippet and sample for further details.

Sample : https://blazorplayground.syncfusion.com/embed/LDhTWhMGdVvwEuBx?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

<SfButton Content="Search" OnClick="search"></SfButton>

<SfTextBox @ref="TextBox" Placeholder="Search" Width="200px"></SfTextBox>

 

 

<SfGrid DataSource="@Orders" @ref="DefaultGrid">

 

    <GridEditSettings AllowAdding="true" ShowAddNewRow="true"></GridEditSettings>

    <GridColumns>

 

@code {

    SfTextBox TextBox;

    private SfGrid<OrderData> DefaultGrid;

    public List<OrderData> Orders { get; set; }

 

    protected override void OnInitialized()

    {

        Orders = OrderData.GetAllRecords();

    }

    public async Task search()

    {

        var textBoxValue = TextBox.Value;

        await this.DefaultGrid.SearchAsync(textBoxValue);

 

        await TextBox.FocusAsync();

 

    }

 

Please let us know if you have any concerns.

Regards,
Naveen

[Larry]

I added the TextBox.FocusAsync    and the incremental search still sets focus to the first column in the new row.

Your example is not using the incremental search and the grid does not have a foreign key column.

If I remove the foreign key column, the focus stays in the incremental search box.

[Prathap Senthil]

When using the immediate search with the ShowNewAdd property, we would like to clarify that when the grid refreshes during a search operation, the focus automatically moves to the DataGrid add row when the ShowAddNew property is enabled. This is the default behavior.

Instead of using the Input event, we suggest using alternative events like ValueChange or ValueChanged to achieve the desired behavior.

Or, you can suggest the following solution. This approach waits for a certain time in the input textbox before executing the search operation, thereby preventing flickering between the Grid and the input component. Please find the code below for reference

private async Task InputHandler(Syncfusion.Blazor.Inputs.InputEventArgs args)

{

    

    debounceTimer?.Dispose();

    debounceTimer = new System.Threading.Timer(async _ =>

    {

        await InvokeAsync(async () =>

        {

            await Grid.SearchAsync(args.Value);

            await TextBox.FocusAsync();

        });

    }, null, 1000,   System.Threading.Timeout.Infinite);

 

 

 

}

Sample:https://blazorplayground.syncfusion.com/embed/BNBfCVVUTNfuTBzq?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5