Button out of sight not clickable when translated

epsmae commented 3 months ago

Description

I am Porting a Xamarin Forms application to .Net Maui. There is a layout used which is not completely visible to the user unless the user presses a button, similar to the Flyout. When the layout get translated into sight the buttons are not clickable on Android and iOS, works completely fine on Windows.

It is easy reproduceable with a few lines of code, see the linked sample

Steps to Reproduce

Create new maui App
Add a layout which is wider than the screen
Add a button which is outside of the screen
Translate until the button is visible
Click the button

Link to public reproduction project repository

https://github.com/epsmae/MauiTranslationButtonClickIssue

Version with bug

8.0.40 SR5

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

No response

Did you find any workaround?

No

Relevant log output

No response

github-actions[bot] commented 3 months ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

LayoutTo does not work in .NET MAUI (#15439), similarity score: 0.78
Buttons offscreen inside ScrollView do not work on iOS (#15283), similarity score: 0.77
Button does not respond to clicks on lower area of the screen on Android (#10403), similarity score: 0.76

Closed similar issues:

[regression/6.0.4-nightly] [MacCatalyst] [iOS] Gestures does not work on elements initially outside of the view port of the ScrollView (#8647), similarity score: 0.77
Scrollview pushes button below beyond the screen on iOS (#16051), similarity score: 0.76

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

epsmae commented 3 months ago

Thanks bot Not exactly sure if these issues have the same root cause. I had a look and tried the "InvalidateMeasure" suggested workaround without success.

    private void OnTranslateClicked(object? sender, EventArgs e)
    {
        TranslationLayout.TranslationX = -TranslationLayout.ColumnDefinitions[1].Width.Value;
        (TranslationLayout as IView).InvalidateMeasure();
        (CounterBtn as IView).InvalidateMeasure();
        InvalidateMeasure();
    }

RoiChen001 commented 3 months ago

Can repro this issue at Android platform on the 17.10 Preview 7(8.0.21&8.0.40).

johannes-keinestam commented 2 months ago

I experienced this issue too, but seems it was only on Android so it might be unrelated.

From what I could tell in the Android Layout Inspector, it was due to the WrapperView containing the MaterialButton not being translated, and all interactions with the MaterialButton outside the WrapperView would be ignored. I believe this has to do with ViewHandler.HasContainerView works in conjunction with TranslationX/TranslationY.

I solved it for now with this hacky workaround added to the Android start up sequence (before the app UI is built, I put it in my MainApplication constructor):

// The Android MAUI implementation of translation is broken if the platform view has a container view.
// The translation will only ever be set on the platform view, but the container/wrapper will remain untranslated.
// Might _look_ fine, but you cannot interact with the view if its translated to outside the container.
var applyTranslation = (IViewHandler handler, IView view) =>
{
    if (handler.PlatformView is Android.Views.View platformView)
    {
        if (handler.HasContainer && handler.ContainerView is Android.Views.View containerView)
        {
            // Only translate the container view.
            platformView.TranslationX = 0;
            platformView.TranslationY = 0;
            containerView.UpdateTranslationX(view);
            containerView.UpdateTranslationY(view);
        }
        else
        {
            platformView.UpdateTranslationX(view);
            platformView.UpdateTranslationY(view);
        }
    }
};

ViewHandler.ViewMapper.ReplaceMapping(nameof(IView.TranslationY), applyTranslation);
ViewHandler.ViewMapper.ReplaceMapping(nameof(IView.TranslationX), applyTranslation);
ViewHandler.ViewMapper.AppendToMapping(nameof(IViewHandler.ContainerView), applyTranslation);

dotnet / maui