When repeatedly showing and closing a popup using Popup v2 on Android, sometimes only the overlay remains.

[cat0363]

I use a popup as an indicator. When a button is pressed, the indicator is displayed and processing begins, and the indicator closes after the processing is complete, but occasionally only the indicator background overlay remains, and the screen remains in an inoperable state.

When this occurs, the indicator itself will not be displayed, and only the overlay will be displayed. This is most likely to occur if the interval between Show and Close is short.

This issue does not occur on iOS. It occurs with a high probability only on Android.

I'm currently working on creating code to reproduce the problem. For reference, here is the implementation of the methods I use for Show and Close:

    private PopupIndicator pIndicator = null;

    protected async Task ShowIndicator()
    {
        if (pIndicator == null)
        {
            pIndicator = new PopupIndicator();
            var tcs = new TaskCompletionSource();
            EventHandler handler = (s, e) =>
            {
                tcs.TrySetResult();
            };
            pIndicator.Opened += handler;

            Dispatcher.Dispatch(async () =>
            {
                await this.ShowPopupAsync(pIndicator, new PopupOptions()
                {
                    CanBeDismissedByTappingOutsideOfPopup = false,
                    Shape = new RoundRectangle
                    {
                        Stroke = Colors.Transparent,
                        StrokeThickness = 0
                    }
                });
            });

            await tcs.Task;
            pIndicator.Opened -= handler;
        }
    }

    protected async Task HideIndicator()
    {
        if (pIndicator != null)
        {
            var tcs = new TaskCompletionSource();
            EventHandler handler = (s, e) =>
            {
                tcs.TrySetResult();
            };
            pIndicator.Closed += handler;

            Dispatcher.Dispatch(async () =>
            {
                await pIndicator.CloseAsync();
            });

            await tcs.Task;
            pIndicator.Closed -= handler;
            pIndicator = null;
        }
    }

I thought the problem might be that the indicator wasn't fully displayed or closed, so I used TaskCompletionSource and Popup's Opend and Closed events, but that wasn't the problem.

As an aside, if you have Popup display and close processing written within the NavigatedTo event, and you have implemented this Popup display processing on screen A in Android, when you transition from screen A to screen B and then display and close the Popup within the NavigatedTo event when returning from screen B to screen A, the Popup's content will not be displayed and only the overlay will remain. This is similar to the above, but it may be a different issue.

Has anyone encountered a similar issue and solved this problem? Thank you.

[LeoJHarris]

@cat0363 I second this, having the same issue only noticed this very recently, not previously reported as an issue in our app, we are rolling back to an earlier version and will monitor if the issue is gone.

[cat0363]

@LeoJHarris , Thank you for your comment.. I was able to find a solution to this problem. By using the Dispatcher.DispatchAsync method for displaying indicators, closing them, and updating the UI while indicators are displayed, and waiting with await, I resolved the issue where only the overlay remained.

If I get the expected results in the app I'm implementing, I'll close this discussion.

[cat0363]

The code below is what I wrote to solve this problem.

private PopupIndicator pIndicator = null;

protected async Task ShowIndicator()
{
    if (pIndicator == null)
    {
        try
        {
            pIndicator = new PopupIndicator();
            var tcs = new TaskCompletionSource();
            EventHandler handler = (s, e) =>
            {
                tcs.TrySetResult();
            };
            pIndicator.Opened += handler;

            await Dispatcher.DispatchAsync(() =>
            {
                this.ShowPopup(pIndicator, new PopupOptions()
                {
                    CanBeDismissedByTappingOutsideOfPopup = false,
                    Shape = null
                });
            });

            await tcs.Task;
            pIndicator.Opened -= handler;

            // Solutions for Remaining Overlay Issues
            await Dispatcher.DispatchAsync(async () =>
            {
                await Task.Delay(1);
            });
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine(ex.Message + ":" + ex.StackTrace);
        }
    }
}

protected async Task HideIndicator()
{
    try
    {
        if (pIndicator != null)
        {
            var tcs = new TaskCompletionSource();
            EventHandler handler = (s, e) =>
            {
                tcs.TrySetResult();
            };
            pIndicator.Closed += handler;

            await Dispatcher.DispatchAsync(async () =>
            {
                try
                {
                    await pIndicator.CloseAsync();
                }
                catch (Exception ex)
                {
                    tcs.TrySetException(ex);
                }
            });

            await tcs.Task;
            pIndicator.Closed -= handler;
            pIndicator = null;
        }
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine(ex.Message + ":" + ex.StackTrace);
    }
}

After displaying the indicator, applying the following trick resolved the issue where only the overlay remained.

            // Solutions for Remaining Overlay Issues
            await Dispatcher.DispatchAsync(async () =>
            {
                await Task.Delay(1);
            });

It is likely that the issue was resolved by forcing a redraw on the UI thread.
By incorporating this trick, you no longer need to call the UI update process during indicator display using the Dispatcher.DispatchAsync method.

The following is an implementation example.

private async void btnShow_Clicked(object sender, EventArgs e)
{
    this.IsEnabled = false;
    await ShowIndicator();
   
    BindableLayout.SetItemsSource(slTest, null);

    ObservableCollection<TestItem> testItems = new ObservableCollection<TestItem>();
    for (int i = 0; i < 1000; ++i)
    {
        testItems.Add(new TestItem() { ItemName = "ItemName" + i.ToString("D4") });
    }

    BindableLayout.SetItemsSource(slTest, testItems);

    await HideIndicator();
    this.IsEnabled = true;
}

Before implementing this trick, the code had to be as follows.

private async void btnShow_Clicked(object sender, EventArgs e)
{
    this.IsEnabled = false;
    await ShowIndicator();

    await Dispatcher.DispatchAsync(() =>
    {
        BindableLayout.SetItemsSource(slTest, null);
    });

    ObservableCollection<TestItem> testItems = new ObservableCollection<TestItem>();
    for (int i = 0; i < 1000; ++i)
    {
        testItems.Add(new TestItem() { ItemName = "ItemName" + i.ToString("D4") });
    }

    await Dispatcher.DispatchAsync(() =>
    {
        BindableLayout.SetItemsSource(slTest, testItems);
    });

    await HideIndicator();
    this.IsEnabled = true;
}

The latter approach is preferable, but if you don't mind that the UI isn't updated each time during indicator display, the former approach is sufficient. I hope this helps even a few people who are struggling with the same problem.

[pictos]

Probably related to this issue:

• Deadlock with Modal navigation and animation dotnet/maui#29628

[cat0363]

@pictos , The issue you raised targets iOS, but does it also apply to Android?

[pictos]

@cat0363 can't confirm, but since it's on modal navigation ,the first assumption is that a cross-platform issue. Didn't try on android at that time

[cat0363]

@pictos , Thank you for your reply. I tested your source code on Android, but the issue did not reproduce on Android. However, the symptoms are similar. I will look into whether similar issues have been reported on the .NET MAUI side for Android.

[cat0363]

@pictos , As an aside, your code now works as intended when implemented as shown below.

public partial class Banner
{
    private CancellationTokenSource cts;

    public Banner()
    {
        InitializeComponent();
        Loaded += OnLoaded;
        Unloaded += OnUnloaded;
    }

    private void OnUnloaded(object? sender, EventArgs e)
    {
        cts?.Cancel();
    }

    private void OnLoaded(object? sender, EventArgs e)
    {
        cts = new CancellationTokenSource();
        Task.Run(() => RotateIcon(cts.Token));
    }

    private async Task RotateIcon(CancellationToken token)
    {
        try
        {
            while (!token.IsCancellationRequested)
            {
                await loadIcon.RelRotateTo(360, 1000, Easing.Linear);
            }
        }
        catch (OperationCanceledException)
        {
            ;
        }
    }
}

iPhone.15.iOS.17.0.2025-09-18.15-48-06.mp4

[pictos]

@cat0363 thanks for investigating it❣️ Interesting that animations works on a background thread.