SfMultiSelect - OnValueRemove Errors

[Brian Pautsch]

When OnValueRemove fires, we have logic to update the list it's bound to, but we're seeing incorrect UI updates and are also getting JS error. Example project i

Demo:

https://www.loom.com/share/9ef64a4475c4423da299faac37b8240f?sid=c787df3f-772f-4ade-9401-9f1c30708a4b

Attachment: SFIssues_28d61524.zip

[Yohapuja Selvakumaran]

Hi Brian

Thank you for reaching out. The NullReferenceException you are encountering occurs because the SfMultiSelect component is conditionally rendered using an @if statement. When an item is removed, the component might be removed from the UI.

To resolve this, Instead of conditionally rendering the component, provide a default value:

    <SfMultiSelect TItem="Role" TValue="List<string>" @bind-Value="_existingRoleIDs" DataSource="@(_allRoles ?? new List<Role>())"
                  AllowFiltering="false" Mode="VisualMode.Box" ShowClearButton="false">
        <MultiSelectFieldSettings Text="Name" Value="RoleID"></MultiSelectFieldSettings>
        <MultiSelectEvents TItem="Role" TValue="List<string>" OnValueRemove="OnValueRemove"></MultiSelectEvents>
    </SfMultiSelect>

Removing the @if condition ensures the component always exists in the UI, preventing the error. Please find the modified sample in the attachement.

Please try this solution and let us know if you need any further assistance.

Regards,

Yohapuja S

Attachment: SFIssues_multiselect_c320b00e.zip

[Brian Pautsch]

That's helps with the NULL issue, but what about the issue where I click "X" next to one and multiple chips disappear. Please see the video.

[Yohapuja Selvakumaran]

Hi Brian,

We understand that clicking the "X" to remove a value in the SfMultiSelect component was unexpectedly clearing multiple values.

This issue occurs due to the UI state update timing in Blazor. To resolve this, adding a slight delay before modifying the bound list ensures the component updates correctly without affecting multiple items.

Please update your OnValueRemove method as follows:

private async void OnValueRemove(RemoveEventArgs<Role> args)
{
    if (args.ItemData != null && args.ItemData.RoleID != null)
    {
        await Task.Delay(50);
        _existingRoleIDs?.Remove(args.ItemData.RoleID);
        StateHasChanged();  // Force a UI update
    }
}

This delay allows the component to process the removal correctly, preventing multiple items from being cleared at once. Please find the modified sample in the attachment.

Regards,

Yohapuja S

Attachment: SFIssues_28d61524_(2)_86037010.zip