[BUG] Snackbar messages don't anchor properly on iOS

[KeithBoynton]

Is there an existing issue for this?

• I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

When anchoring snackbar messages to a UI element on iOS they are not getting anchored above the specified UI element as would be expected. However, on Android they are anchored correctly.

iOS not working, it should be displayed above the button:

Expected Behavior

I would expect the snackbar message to be displayed just above the UI element it has been anchored to but on iOS it is displayed in the same (default) place as when no anchor is provided.

Andoid working as expected, above the button:

Steps To Reproduce

1. Clone the attached repository and run the solution on Android.
2. Click the button and observe the snackbar message being displayed correctly.
3. Run the solution on iOS
4. Click the button and observe the snackbar message NOT being displayed correctly

Link to public reproduction project repository

https://bitbucket.org/KeithBoynton/snackbar-anchor/src/master/

Environment

- .NET MAUI CommunityToolkit.Maui: 9.0.0
- .NET MAUI: 8.0.21

Anything else?

No response

[cat0363]

@KeithBoynton , Is the behavior you expect below?

So, if Anchor is placed at the top of the screen, which of the following is the expected behavior?

[Case 1]

[Case 2]

If Anchor is inside the scroll view, case 2 will behave as follows.

iPhone.15.iOS.17.0.2024-05-17.16-17-42.mp4

Both require code modifications on the Community Toolkit side.
You might want to ask why the snackbar is displayed at the bottom, as it is unclear whether it is intentionally displayed at the bottom or if it is a bug.

[KeithBoynton]

Thanks for the quick reply @cat0363
Yes the behaviour you illustrated in the first image is what I would expect, that's how it behaves on Android.

Case 2 looks correct if the element being anchored to is at the top of the screen, although I hadn't considered that as I'm not anchoring to an element at the top of the screen. But if I was I imagine that's what I'd want. Your illustration for when it's in a scroll view looks correct too.

Thanks again!

[cat0363]

@KeithBoynton , Thank you for your reply.
When I investigated the behavior of Android, I found that Android behaved in Case 1.
Since Android cannot behave like Case 2, I think iOS will have no choice but to behave like Case 1.
I think Case 2 is preferable, but it seems like we have no choice but to adapt it to Case 1.

By the way, Case 1 can be implemented by making the following changes.
It can be fixed by changing just one line.

[src\CommunityToolkit.Maui.Core\Views\Alert\AlertView.macios.cs]

void ConstraintInParent()
{
	_ = Container ?? throw new InvalidOperationException($"{nameof(AlertView)}.{nameof(Initialize)} not called");

	const int defaultSpacing = 10;
	if (AnchorView is null)
	{
		this.SafeBottomAnchor().ConstraintEqualTo(ParentView.SafeBottomAnchor(), -defaultSpacing).Active = true;
		this.SafeTopAnchor().ConstraintGreaterThanOrEqualTo(ParentView.SafeTopAnchor(), defaultSpacing).Active = true;
	}
	else
	{
		this.SafeBottomAnchor().ConstraintEqualTo(AnchorView.SafeBottomAnchor(), -AnchorView.Frame.Height).Active = true;
	}

	this.SafeLeadingAnchor().ConstraintGreaterThanOrEqualTo(ParentView.SafeLeadingAnchor(), defaultSpacing).Active = true;
	this.SafeTrailingAnchor().ConstraintLessThanOrEqualTo(ParentView.SafeTrailingAnchor(), -defaultSpacing).Active = true;
	this.SafeCenterXAnchor().ConstraintEqualTo(ParentView.SafeCenterXAnchor()).Active = true;

	Container.SafeLeadingAnchor().ConstraintEqualTo(this.SafeLeadingAnchor(), defaultSpacing).Active = true;
	Container.SafeTrailingAnchor().ConstraintEqualTo(this.SafeTrailingAnchor(), -defaultSpacing).Active = true;
	Container.SafeBottomAnchor().ConstraintEqualTo(this.SafeBottomAnchor(), -defaultSpacing).Active = true;
	Container.SafeTopAnchor().ConstraintEqualTo(this.SafeTopAnchor(), defaultSpacing).Active = true;
}

[cat0363]

I forgot to mention this, but in the case of Android, if you specify an anchor for the Snackbar using the SetAnchorView method, the Snackbar will be displayed above the Anchor.

https://developer.android.com/reference/com/google/android/material/snackbar/BaseTransientBottomBar?_gl=1*13uplkd*_up*MQ..*_ga*MTMxMjg4Mjg0OC4xNzE2MTkxMjIz*_ga_6HH9YJMN9M*MTcxNjE5MTIyMy4xLjAuMTcxNjE5MTIyMy4wLjAuMA..#setAnchorView(int)

For this reason, it is not possible to display the Snackbar below Anchor on Android.

The other day, I showed a pattern for Case 2, but Android cannot support Case 2, so if it is a pattern for Case 1, I can create a PR.
If there is no problem with the pattern in Case 1 and you need to create a PR, please contact me.
I will leave it up to the Community Toolkit members to decide what to do.

[raginmari]

The fact that the snackbar does not properly "stack" on top of its AnchorView on iOS is caused by this line: it mistakes the "bottom" anchor for the "top" anchor which should be used because contrary to the default case when the snackbar is positioned inside the window, we want the snackbar to be positioned outside of (and above) the anchor view.

[brminnick]

Thanks @raginmari! Could you submit a PR with the fix?