circular reference

[Jeroen Van de Sande]

Hi all,

I'm having some trouble with the SFTab.

Setup: I have 2 tabs. The first is edit with some form fields and the second is a image tab with the sfuploader.

The component opens on the first tab, but when I try to click on the sonc I get the error below

Uncaught TypeError TypeError: Converting circular structure to JSON

    --> starting at object with constructor 'r'

    | property 'interaction' -> object with constructor 'r'

    --- property 'root' closes the circle

    at O (https://localhost:44344/_framework/blazor.webassembly.js?v=wC-zAyYHVTNzevCw3SFvHI4jG51pV1-b5sQ3Rj11QGI:1:5193)

    at b (https://localhost:44344/_framework/blazor.webassembly.js?v=wC-zAyYHVTNzevCw3SFvHI4jG51pV1-b5sQ3Rj11QGI:1:1986)

    at invokeMethodAsync (https://localhost:44344/_framework/blazor.webassembly.js?v=wC-zAyYHVTNzevCw3SFvHI4jG51pV1-b5sQ3Rj11QGI:1:3845)

    at s.clickHandler (C:\Users\xxxx\.nuget\packages\syncfusion.blazor.core\20.1.0.47\staticwebassets\scripts\syncfusion-blazor.min.js:21:1185995)

    at nrWrapper (undefined:3:34574)

Uncaught TypeError TypeError: Converting circular structure to JSON

    --> starting at object with constructor 'r'

    | property 'interaction' -> object with constructor 'r'

    --- property 'root' closes the circle

    at O (https://localhost:44344/_framework/blazor.webassembly.js?v=wC-zAyYHVTNzevCw3SFvHI4jG51pV1-b5sQ3Rj11QGI:1:5193)

    at b (https://localhost:44344/_framework/blazor.webassembly.js?v=wC-zAyYHVTNzevCw3SFvHI4jG51pV1-b5sQ3Rj11QGI:1:1986)

    at invokeMethodAsync (https://localhost:44344/_framework/blazor.webassembly.js?v=wC-zAyYHVTNzevCw3SFvHI4jG51pV1-b5sQ3Rj11QGI:1:3845)

    at s.clickHandler (C:\Users\xxxxx\.nuget\packages\syncfusion.blazor.core\20.1.0.47\staticwebassets\scripts\syncfusion-blazor.min.js:21:1185995)

    at nrWrapper (undefined:3:34574)

cleaned/simplified code:

   <div class="control-section e-tab-section">

        <SfTab CssClass="BlazorTab" @bind-SelectedItem="SelectedPage" LoadOn="ContentLoad.Init">

            <TabItems>

                <TabItem Disabled="@DataPageDisabled">

                    <ChildContent>

                        <TabHeader Text="Data"></TabHeader>

                    </ChildContent>

                    <ContentTemplate >

                        <div id="meta">

                            <div class="wizard-title">Add the data </div>

                            <div class="responsive-align">

                                <EditForm Model="Model" Context="form" OnValidSubmit="Launch" class="card card-body bg-light col-7 md-form">

                                    <div class="form-outline">

                                        <input id="title" class="form-control" @bind="Name" @bind:event="oninput" />

                                       <!--simplified-->

                                    </div>

                                    <div class="control-wrapper form-outline">

                                        <label class="example-label">select</label>

                                        <SfAutoComplete TValue="Guid" AllowFiltering="true" TItem="CDTO" Highlight="true" Placeholder="e.g. (type 3 letters)" Autofill="true" DataSource="@dtolist" @ref="_autocomplete" AllowCustom="false" Value="@CGuid">

                                            <AutoCompleteFieldSettings Value="Id" Text="Name" />

                                            <AutoCompleteEvents TValue="Guid" TItem="CDTO" Filtering="@OnFilter" ValueChange="@ValueChangeHandler" />

                                            <AutoCompleteTemplates TItem="CDTO">

                                                <ItemTemplate >

                                                    <div>

                                                        @if (((context as CDTO).Logo != null)){

                                                            <img class="compimg" alt="logo" src="@((context as CDTO).Logo.URL())" />

                                                        }

                                                        <div class="ename"> @((context as CDTO).Name) </div>

                                                    </div>

                                                </ItemTemplate>

                                                <HeaderTemplate>

                                                    <div class="header"> <span>logo</span> <span class="info">info</span></div>

                                                </HeaderTemplate>

                                            </AutoCompleteTemplates>

                                        </SfAutoComplete>

                                    </div>

                                    <br />

                                    <div class="form-outline">

                                        <input type="date" @bind-value="daate" class="form-control"/>

                                      <!--simplified-->

                                    </div>

                                    <br />

                                </EditForm>

                                <br />

                                    <SfButton @onclick="Launch">Launch and add images</SfButton>

                            </div>

                        </div>

                    </ContentTemplate>

                </TabItem>

                <TabItem Disabled="@UploadPageDisabled">

                    <ChildContent>

                        <TabHeader Text="Images"></TabHeader>

                    </ChildContent>

                    <ContentTemplate>

                        <div id="selectTrain">

                            <div class="wizard-title">Upload the images</div>

                            <div class="form-row">

                                <div class="form-group col-md-10 control-section">

                                    <SfUploader ID="UploadFiles" AllowedExtensions=".png,.jpeg,.jpg, .gif" @ref="_uploader" >

                                        <UploaderEvents ValueChange="onUploadChange" OnRemove="onUploadRemove"></UploaderEvents>

                                        <UploaderTemplates>

                                            <Template Context="ImageContext">

                                                <table>

                                                    <tr>

                                                        <td style="width: 20%">

                                                            <img class="upload-image" alt="Preview Image @(ImageContext.Name)"

                                                             src="@(files.Count >0 ? files.Where(item=>item.Id == ImageContext.Id)?.FirstOrDefault()?.Path : string.Empty)">

                                                        </td>

                                                        <td style="width: 80%">

                                                            <div style="padding: 7px; float:left;">

                                                                <h5 title="@(ImageContext.Name)">@(ImageContext.Name)</h5>

                                                                <i>@(ImageContext.Size) Bytes</i>

                                                            </div>

                                                             <div style="padding: 7px; float:right;">

                                                                     <span @onclick="() => RemoveFile(ImageContext.Id)"><span class="material-symbols-outlined" style="cursor: pointer ;content: 'delete'">delete</span></span><br />

                                                                     <span @onclick="() => UploadFile(ImageContext.Id)"><span class="material-symbols-outlined" style="cursor: pointer ; content: 'upload'">upload</span></span>

                                                              </div>

                                                        </td>

                                                    </tr>

                                                </table>

                                            </Template>

                                        </UploaderTemplates>

                                    </SfUploader>

                                    <div class="row">

                                        <div class="col-9">show images here</div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </ContentTemplate>

                </TabItem>

            </TabItems>

        </SfTab>

    </div>

Has somebody any idea of what I'm missing?

[Jeroen Van de Sande]

In addition; I don't get the bug reproduced continuously. Often it seems to work after a 2nd build (debug) although it the bug manifests from time to time several times in a row

[Ravikumar Venkatesan]

Hi Jeroen,

Greetings from Syncfusion support.

We have validated your query “Uncaught TypeError TypeError: Converting circular structure to JSON” at our end. We have prepared a sample based on your shared code snippet and tried to reproduce the problem at our end and we are unable to reproduce it on our end. Can you kindly try the shared sample and share the below details if you still facing the same problem.

• Reproduce the problem in the shared sample or
• Share a simple issue reproducing sample if possible.

Kindly let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

Attachment: blazorwasmtabwithuploader_52e7c151.zip

[Jeroen Van de Sande]

Hi,

I'll look into it, but as it sometimes pops up and sometimes not, I hope I can come back on it soon.

(seems to be build related)

[Ravikumar Venkatesan]

Hi Jeroen,

Thanks for the update.

We are waiting to hear from you.

Regards,

Ravikumar Venkatesan