MAUI: Issue with deleteing the last item from ObservableCollection

129 Views Asked by At

I am using an 'ObservableCollection' saving comments. When I delete a comment, I will fetch the deleted comment id and delete that comment from the 'ObservableCollection'.

My Problem is if I delete the last comment all the previous comments are vanishing from the UI and showing only the initial comment. When I reopen the page or delete any other comment the vanished previous comments are coming back.

My Code:

foreach (var item in customerCommentList)
{
    if (item.parentComment.supportItemComments.commentId == deleteCommentId)
    {
        customerCommentList.Remove(item);
        break;
    }
}

Here customerCommentList is the collection and from that I removing the data. Is there any issue in deleting an item from the collection? Is there any known issue in net 7.0?

Screen recorder video uploaded here and here to understand the issue.

UPDATE

I have created a more optimized demo with more findings and uploaded here.

On this demo I have added 2 pages, one is CommentPage and the other one is MainPage. On both pages I have used the same logic to show the items on the UI and delete an item from UI. On MainPage everything is working fine and on CommentsPage I am facing the same issues. On both the pages the UI is different, so I think the issue is related to the UI layouts. Unfortunately I can't trigger it out.

I suspect it is due to calling the functions from background thread, so I verified that and on both background thread and main UI thread the same issue is there.

1

There are 1 best solutions below

4
Liqun Shen-MSFT On BEST ANSWER

I can reproduce this issue on Android (But work fine on iOS).

The only difference between the CommentPage and the MainPage is the Caching strategy, which is used to improve performance.

The default value of this property is RetainElement. So, you just change the value for the ListView in CommentPage which makes the issue disappear.

<ListView
    ...
    CachingStrategy="RecycleElement"
    SeparatorColor="#cecece"
    SelectionMode="None"
    HasUnevenRows="True">

Another suggestion is that you could use CollectionView instead of ListView, as aims to provide a more flexible, and performant alternative to ListView. Tested with no issue on CollectionView.