Chip Delete event bug - messes up the order & items

[Davy]

Hello,

we are trying to use the chip event with delete. We have list of object which we render with a foreach { <ChipItem /> }. When the OnDelete event is executed, we remove one item from the object list. This causes the chip control to re-render the foreach loop. However this results in a wrong list. The wrong items are shown and the order is messed up.

[Prasanth Madhaiyan]

Hi Davy,

Greetings from Syncfusion support.

Based on the shared details, we understand that you are rendering the chip items using the foreach loop with the Chip component's ChipItems tag at your end. You were facing issues when performing the delete action, as removing one item from the list object inside the Deleted event of the chip component resulted in displaying incorrect items and their orders.

Upon investigating, we replicated the issue at our end and identified that the problem with the Chip component arises due to a missing update in the component's data source after removing chip items while rendering them using the ChipItems tag.

To resolve the issue mentioned in the Blazor Chips component, you can utilize our Chips property. This property helps render chip item components without any issues.

Refer to the below code snippets.

[Index.razor]

 

<SfChip ID="chips" Chips="@ChipItems" EnableDelete=true>

    <ChipEvents Deleted="Deleted"></ChipEvents>

</SfChip>

 

@code {

    public void Deleted(ChipDeletedEventArgs args)

    {

        // Find the index of the item to be deleted

        var index = ChipItems.FindIndex(x => x.Text == args.Text);

 

        if (index != -1)

        {

            // Remove the item from the Chips list

            ChipItems.RemoveAt(index);

        }

    }

 

    List<ChipItem> ChipItems = new List<ChipItem>

    {

        new ChipItem { Text = "Item 1" },

        new ChipItem { Text = "Item 2"},

        new ChipItem { Text = "Item 3" },

        new ChipItem { Text = "Item 4" },

        new ChipItem { Text = "Item 5"},

    };

}

 

For your reference, we have attached the sample.

Sample: https://blazorplayground.syncfusion.com/VXVJjMMOqPLFFNpw

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Davy]

Thanks, that sample helps.

Did you also create an issue for fixing the bug? If so, is there a follow up link?

[Jafar Ali Shahulhameed]

Hi Davy,

We would like to inform you that it is not consider as a bug on our end, as mentioned in the previous response, Order of chip items will collapse after deleting an item in loop when rendered using ChipItems tag. We kindly suggest you to utilize our Chips property and binding the chip items as a data source to it to avoid the issue you are facing after deletion.

Kindly get back to us if you need further assistance.

Regards,

Jafar

[Davy]

In your first reply you say: "Upon investigating, we replicated the issue at our end and identified". That seems like a bug that needs to be fixed.

If it is not, then you might want to change your documentation where you suggest rendering chips from a  

[Prasanth Madhaiyan]

Hi Davy,

Based on the details you provided, we would like to inform you that we have recreated the mentioned scenario on our end using the Blazor Chips component. We have provided a solution for this scenario, suggesting the use of the Chips property in the Chip component for rendering on your end. It has successfully worked without any issues. Additionally, we include details related to this scenario in our knowledge base article. Once added, the knowledge base article will be updated and published.

Regards,

Prasanth Madhaiyan.