JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.

[Woudjee]

Hi,

I have been getting the following exception since yesterday and after many hours or trying, I have not been able to work out why I am getting this exception:

JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.

Imagine the following structure:

1. Users (page) - UserTable (component) - EditUserOffCanvas (component)
2. Companies (page) - CompanyTable (component) - CompanyOffCanvas (component) - UserTable (component) - EditUserOffCanvas (component)
3. Companies (page) - CompanyTable (component) - CompanyOffCanvas (component) - AddUserOffCanvas (component)

Both 1 and 3 worked the first time without any issues, but no matter what I try, 2 does not work.

I have tried many (stupid) thing. After searching online and not being able to find anything, I asked Gemini, which suggested for me to restructure my code such that my OffCanvas components live in the uppermost parent. This morning, this is what I attempted. All OffCanvas components now live in the uppermost page (Users/Companies). The AddUserOffCanvas still works, but now, EditUserOffcanvas does not work anywhere. Note that I did not change its implementation and that the Edit variant is essentially a copy-paste of the Add variant.

I am not sure what to do. Any help is appreciated.

[Woudjee]

After writing here that EditUserOffCanvas is "essentially" a copy-paste of AddUserOffCanvas, I decided to swap edit out for add. It works. But why?

AddUserOffCanvas:

@if (Company != null)
{
    <Offcanvas @ref="Offcanvas" @key=Company.Id Size="OffcanvasSize.Regular" Title="Register new user" Style="z-index: 6">
        <BodyTemplate>
            <EditForm Model="Input" method="post" OnValidSubmit="AddUserToCompanyAsync" FormName="registerUserToCompany" style="margin: 1.5rem">
                <DataAnnotationsValidator />

                <div class="sub-menu top">
                    <label class="form-label">Email:</label>
                    <div class="form mb-3">
                        <InputText @bind-Value="Input.Email" class="form-control" autocomplete="company" aria-required="true" />
                    </div>

                    <label class="form-label">Volledige naam:</label>
                    <div class="form mb-3">
                        <InputText @bind-Value="Input.FullName" class="form-control" autocomplete="username" aria-required="true" />
                    </div>

                    <label class="form-label">Role:</label>
                    <div class="form mb-2">
                        <InputSelect @bind-Value="Input.Role" class="form-control" aria-required="true">
                            @foreach (CompanyRole role in Enum.GetValues<CompanyRole>().Where(role => role != CompanyRole.Unassigned))
                            {
                                <option value="@role">@role.GetDescription()</option>
                            }
                        </InputSelect>
                    </div>
                </div>

                <div class="sub-menu bot">
                    <button type="button" @onclick="() => Offcanvas.HideAsync()" class="btn btn-lg btn-secondary">Cancel</button>
                    <button type="submit" class="btn btn-lg btn-primary">Add user</button>
                </div>
            </EditForm>
        </BodyTemplate>
    </Offcanvas>
}

public partial class AddUserOffCanvas
{
    private readonly IUserRepository _userRepository;

    public AddUserOffCanvas(IUserRepository userRepository)
    {
        _userRepository = userRepository;
    }

    [CascadingParameter]
    public SaphiraModal Modal { get; set; } = default!;
    public Offcanvas Offcanvas { get; set; } = default!;
    public CompanyDTO? Company { get; set; }
    public AddUserToCompanyRequest Input { get; set; } = new AddUserToCompanyRequest();

    [Parameter]
    public EventCallback OnRegistrationCompleted { get; set; }

    public async Task ShowAsync(CompanyDTO company)
    {
        Company = company;
        Input = new AddUserToCompanyRequest() { CopmanyId = Company.Id };
        StateHasChanged();

        // This delay allows the render cycle to complete before showing the component:
        await Task.Delay(1);
        await Offcanvas.ShowAsync();
    }

    public async Task AddUserToCompanyAsync()
    {
        // ...
    }
}`

[Woudjee]

EditUserOffCanvas:

@if (User != null)
{
    <Offcanvas @ref="Offcanvas" @key=User.Id Size="OffcanvasSize.Regular" Title="Register new user" Style="z-index: 6">
        <BodyTemplate>
            <EditForm Model="User" method="post" OnValidSubmit="SaveAsync" FormName="editUser" style="margin: 1.5rem">
                <DataAnnotationsValidator />

                <div class="sub-menu top">
                    <label class="form-label">Email:</label>
                    <div class="form mb-3">
                        <InputText @bind-Value="User.Email" class="form-control" autocomplete="username" aria-required="true" />
                    </div>

                    <label class="form-label">Volledige naam:</label>
                    <div class="form mb-3">
                        <InputText @bind-Value="User.FullName" class="form-control" autocomplete="username" aria-required="true" />
                    </div>

                    @if (CompanyId.HasValue)
                    {
                        <label class="form-label">Role:</label>
                        <div class="form mb-2">
                            <InputSelect @bind-Value="User.CompanyProfiles[CompanyId.Value].Role" class="form-control" aria-required="true">
                                @foreach (CompanyRole role in Enum.GetValues<CompanyRole>().Where(role => role != CompanyRole.Unassigned))
                                {
                                    <option value="@role">@role.GetDescription()</option>
                                }
                            </InputSelect>
                        </div>
                    }
                </div>

                <div class="sub-menu bot">
                    <button type="button" @onclick="() => Offcanvas.HideAsync()" class="btn btn-lg btn-secondary">Cancel</button>
                    <button type="submit" class="btn btn-lg btn-primary">Save</button>
                </div>
            </EditForm>
        </BodyTemplate>
    </Offcanvas>
}

public partial class EditUserOffCanvas
{
    [CascadingParameter]
    public SaphiraModal Modal { get; set; } = default!;
    public Offcanvas Offcanvas { get; set; } = default!;
    public UserDTO? User { get; set; }
    public Guid? CompanyId { get; set; }

    [Parameter]
    public EventCallback OnRegistrationCompleted { get; set; }

    public async Task ShowAsync(UserDTO user, Guid? companyId)
    {
        User = user;
        CompanyId = companyId;
        StateHasChanged();

        // This delay allows the render cycle to complete before showing the component:
        await Task.Delay(1);

        try
        {
            await Offcanvas.ShowAsync();
        }
        catch (Exception ex)
        {
            // TODO EV (TASK ID: 1925)
        }
    }

    public async Task SaveAsync()
    {
        // TODO EV (TASK ID 1926): implement
    }
}`

Note that TASK 1925 is the task I am currently working on.

[javiercn]

@Woudjee thanks for contacting us.

That exception typically happens because there's an error on the circuit or the user navigated away from the page while you were potentially doing some async work. An exception is expected in those two situations, and you should wrap your JSInterop calls in a try..catch for that reason, as you never know when the circuit might get disconnected.

If you want to troubleshoot what's going on, we suggest you check for errors on the browser developer tools console and turn on more detailed logging on the server. Configuring Visual Studio to break on the JSInterop exceptions and examining the call stack will also help.

[Woudjee]

Hi, thank you for your quick reply. The reason I haven't replied is because I have been on a small holiday. I will try to check it out next week! Will let you know my findings :)