SfSplitter refresh issue

[John]

Components inside a splitter do not refresh as expected with certain Parameter values.

In the image below, one control inside the splitter does not update correctly ('Details id = 4' should be 5).

Minimal repro code is included below.

Code to reproduce:

------------- Index.razor -----------------------

@page "/"

@using Syncfusion.Blazor.Layouts

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@{

    var details = this.main.Details;

}

<ComponentWithChild>

    <ComponentA Details=@details />

</ComponentWithChild>

<ComponentWithChild>

    <ComponentA [email protected] />

</ComponentWithChild>

<SfSplitter>

    <SplitterPanes>

        <SplitterPane Size="80%">

            <ChildContent>

                <div>

                    <div>Inside splitter A (ISSUE IS HERE)</div>

                    <ComponentA Details=@details />

                    <div>Inside splitter B</div>

                    <ComponentA [email protected] />

                </div>

            </ChildContent>

        </SplitterPane>

        <SplitterPane Size="20%">

            <ChildContent>

            </ChildContent>

        </SplitterPane>

    </SplitterPanes>

</SfSplitter>

@code{

    private Main main = new Main() { Details = new Details() { Id = 0 }};

    private void IncrementCount()

    {

        this.main.Details = new Details() { Id = this.main.Details.Id + 1 };

    }

}

----------ComponentA.razor ------------------------------------

<h3>Component</h3>

<div>Details id = @this.Details.Id</div>

@code {

    [Parameter]

    public Details Details { get; set; }

}

 ------- ComponentWithChild.razor ---------------

<h3>ComponentWithChild</h3>

@ChildContent

@code {

    [Parameter]

    public RenderFragment? ChildContent { get; set; }

}

------------------- Main.cs --------------------

public class Main

{

public Details Details { get; set; }

}

------------ Details.cs ------------------------

public class Details

{

public int Id { get; set; }

}

[Buvana Sathasivam]

Hi John, 

 

Currently, we are validating your reported query. We will update you with further details on or before February 21, 2022. 

 

Regards, 

Buvana S 

[Buvana Sathasivam]

Hi John, 

Thank you for your patience. 

You can achieve your requirement inside the Blazor Splitter component by defining it in the below way. Please find the below code and sample for your reference. 

<SfSplitter> 

 

    <SplitterPanes> 

 

        <SplitterPane Size="80%"> 

 

            <ChildContent> 

 

                <div> 

 

                    <div>Inside splitter A (ISSUE IS HERE)</div> 

 

                    <ComponentA Details=@this.details /> 

 

                </div> 

 

            </ChildContent> 

 

        </SplitterPane> 

 

    </SplitterPanes> 

 

</SfSplitter> 

 

@code{ 

 

    private Main main { get; set; } = new Main() { Details = new Details() { Id = 0 }}; 

    private Details details { get; set; } 

 

 

    private void IncrementCount() 

 

    { 

 

        this.details = this.main.Details = new Details() { Id = this.main.Details.Id + 1 }; 

 

    } 

    protected override async Task OnInitializedAsync() 

    { 

        this.details = this.main.Details; 

    }  

} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfSplitter-270983918  

Please let us know if you have any concerns. 

Regards, 

Buvana S