Tab closes unexpectedly

[John Meyer]

I have a tab which contains a grid.  The grid has a search box in the toolbar per the HTML below.  When I open the tab, the grid displays with populated data as expected.  If I click in the search box and hit Delete, the tab closes!  Do you have any idea what is causing this and how to fix?

<SfTab @ref="productsTabObj" LoadOn="ContentLoad.Demand" SelectedItem="@productsTabObjSelectedItem" ShowCloseButton="true" OverflowMode="OverflowMode.Scrollable" CssClass="tab_content">

    <TabAnimationSettings>

        <TabAnimationPrevious Effect="AnimationEffect.None"></TabAnimationPrevious>

        <TabAnimationNext Effect="AnimationEffect.None"></TabAnimationNext>

    </TabAnimationSettings>

    <TabItems>

        <TabItem>

            <ChildContent>

                <TabHeader Text="Products List"></TabHeader>

            </ChildContent>

            <ContentTemplate>

                <div class="container tab_container">

                    <div class="row">

                        @* Start Grid *@

                        @if (gridProducts == null)

                        {

                            <h4> Loading...</h4>

                        }

                        else

                        {

                            <div class="container mt-1 mb-1">

                                <div class="row">

                                    <div class="col-10">

                                        <h4>Products</h4>

                                    </div>

                                    <div class="col-2 text-right">

                                        <button class="btn btn-primary btn-sm" @onclick="onActiveFilterChange">@activeButtonText</button>

                                    </div>

                                </div>

                            </div> var Tool = (new List<string>() { "Search" });

                            <SfGrid @ref="sfProductsGrid" DataSource="@gridProducts" AllowPaging="true" Toolbar=@Tool AllowSorting="true" RowHeight="32">

                                <GridPageSettings PageSizes="true"></GridPageSettings>

                                <GridEvents OnRecordDoubleClick="RecordDoubleClickHandler" TValue="GridProduct"></GridEvents>

                                <GridColumns>

                                    <GridColumn Field=@nameof(GridProduct.Id) AllowFiltering="false" HeaderText="Id" Width="0" />

                                    <GridColumn Field=@nameof(GridProduct.ProductNo) HeaderText="Prod No." Width="35" />

                                    <GridColumn Field=@nameof(GridProduct.ProductName) FilterSettings="@(new FilterSettings{ Operator = Operator.Contains })" HeaderText="Product Name" Width="200" />

                                    <GridColumn Field=@nameof(GridProduct.BrandName) HeaderText="Brand" Width="80" />

                                    <GridColumn Field=@nameof(GridProduct.ModifiedDate) AllowFiltering="false" HeaderText="Modified" Format="d" Width="60"></GridColumn>

                                    <GridColumn Field=@nameof(GridProduct.Active) AllowFiltering="false" HeaderText="Active" DisplayAsCheckBox="true" Width="30" />

                                </GridColumns>

                            </SfGrid>

                        }

                        @* End Grid *@

                    </div>

                    <div class="row">

                        <div class="container mt-2 mb-1">

                            <button class="btn btn-outline-primary ml-2" @onclick="onNewProductButtonClick">Create New Product</button>

                        </div>

                    </div>

                </div>

            </ContentTemplate>

        </TabItem>

    </TabItems>

</SfTab>

[Alagumeena Kalaiselvan]

Hi John, 

Greeting from Syncfusion support! 

We have checked your reported issue “Tab closes unexpectedly” with shared sample code but unfortunately we could not replicate the issue at our end. We have prepared a sample based on your shared code and prepared video for your reference which can be get by the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabComponent415211750 

Video Demo Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/video-1226245094 

Note:  The Tab closes when the user press Delete key alone. Refer below UG link for that 

UG Link: https://blazor.syncfusion.com/documentation/tabs/accessibility/#keyboard-interaction 

Kindly share the below details to proceed further 

• Ensure whether the Tab is focused in your case
• Share issue depicting video
• Did you used more than one Tab items?

Regards 

Alagumeena.K