Single click editing leaves border around previously clicked cells

[Greg Hendricks]

Hello,

I'm using the example provided here (https://blazor.syncfusion.com/documentation/datagrid/how-to/single-click-editing-with-batch-mode) to enable editing with a single click.  However, when I click into a different cell, the previous cell stays focused with a blue border.  I tried calling ClearSelectionAsync(), but that does not cause the cell to unfocus.  The only way to cause previously clicked cells to unfocus is to right click on each one and then click somewhere else.  Please advise.

<SfGrid ID="Grid" DataSource="@Topics" TValue="Topic" @ref="Grid" GridLines="GridLine.Both" AllowFiltering="true" AllowReordering="true" AllowResizing="true" AllowGrouping="true" AllowExcelExport="true" AllowSelection="true" AllowSorting="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update","ExcelExport","Search"})">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings>
<GridSelectionSettings Type="SelectionType.Single" Mode="Syncfusion.Blazor.Grids.SelectionMode.Both"></GridSelectionSettings>
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.FilterBar"></GridFilterSettings>
<GridEvents OnToolbarClick="ToolbarClick" CellSelected="CellSelectHandler" TValue="Topic"></GridEvents>
<GridColumns>
<GridColumn Field="@nameof(Topic.PkId)" Visible="false" IsPrimaryKey="true"></GridColumn>
<GridColumn Field="@nameof(Topic.Title)" HeaderText="Title" ValidationRules="@(new ValidationRules{ Required=true })" TextAlign="TextAlign.Left" Width="200"></GridColumn>
<GridColumn Field="@nameof(Topic.ShortDesc)" HeaderText="Short Description" Width="200"></GridColumn>
<GridColumn Field="@nameof(Topic.Company)" HeaderText="Company Name" TextAlign="TextAlign.Left" Width="200"></GridColumn>
</GridColumns>
</SfGrid>


@code {
List<Topic> Topics = null!;
SfGrid<Topic> Grid = null!;


protected override void OnInitialized()
{
Topics = DbContext.Topics.Include(a => a.Owners).ToList();
}
public void ToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport")
{
this.Grid?.ExportToExcelAsync();
}
}


public async Task CellSelectHandler(CellSelectEventArgs<Topic> args)
{
await Grid.EditCellAsync(args.RowIndex, (await Grid.GetColumnFieldNamesAsync())[args.CellIndex]);
}
}

[Prathap Senthil]

Hi Greg Hendricks,

We are unable to reproduce the reported issue when attempting to reproduce the issue. For your reference, we have attached a simple sample and screen recording. To further address the reported problem, we require some additional clarification from your end. Please provide the details below to help us proceed:

• Could you please share with us the video demonstrating of the issue replication Steps?
• Could you please share with us the Nuget version you have used?
• Alternatively, could you share your attempt to replicate the issue using the attached simple sample?

The information you provide will be very helpful in validating the reported query on our end and in providing a solution as quickly as possible. Thank you for your understanding.

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


Regards,
Prathap Senthil

Attachment: Gif_SingleClick_96a26be.zip

[Greg Hendricks]

Thank you for the reply.  I clicked the link and tested the example Grid.  I experienced the same error with the blue border using Firefox, but Chrome worked properly.  However, the grid also did not go into edit mode in either browser, which was surprising.

FYI, I am using v27.1.57 in my own application.

[Prathap Senthil]

We have confirmed that this is an issue and logged a defect report titled  “Single click editing leaves border around previously clicked cells in Firefox browser” This fix will be included in our weekly patch release, which is expected to be rolled out on November 26th, 2024. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    
  
Single click editing leaves border around previously clicked cells in Firefox browser in Blazor | Feedback Portal

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization”

We will get back to you once the release is rolled out. Until then we appreciate your patience.

[Prathap Senthil]

Sorry for the inconvenience caused,

The reported issue was fixed but we were unable to include this fix in today's patch release. However, we want to assure you that the fix will be included in our weekly patch release, scheduled for on or before December 10th, 2024. We appreciate your patience and understanding in the meantime. Thank you.

Until then we appreciate your patience.

[Naveen Palanivel]

We sincerely apologize for any inconvenience and delay you may have experienced.

We were unable to include this fix in our recent volume 4 release. However, we want to assure you that the fix will be included in our weekly patch release, scheduled for on or before December 24th, 2024. We appreciate your patience and understanding in the meantime. Thank you.

Until then we appreciate your patience.

[Naveen Palanivel]

Thanks for your patience,

We are glad to announce that, we have included the fix for the issue  “Single click editing leaves border around previously clicked cells in Firefox browser” in our 28.1.36 release.  So please upgrade to our latest version of Syncfusion NuGet package to resolve the reported issue. Please find the NuGet package for latest fixes and features from below.

NuGet : https://www.nuget.org/packages/Syncfusion.Blazor.Grid

Root cause : In Chrome, when editing and clicking on another cell, the onblur event removes the focusclass. However, in Firefox, the onblur event does not trigger correctly, resulting in the focusclass remaining on the previously clicked cell.

Action Taken: To resolve the issue, bind the onfocusout event to remove the focusclass. The onfocusout event triggers consistently in both Chrome and Firefox, ensuring proper focus removal.