CODEWITHSUNDEEP
androidmaui.net-mauimaui-blazor
Andrei Vinogradov
Andrei Vinogradov

Reputation: 1945

Disable back button functionality in MAUI Blazor

A have an app, created with MAUI + Blazor Hybrid and running on Android. The app has two pages: page1 and page2. When user navigates from page1 to page2 he can go back to page1 using Android software/hardware back button. What I want is to prevent user from doing that until app logic allows to do so.

In native Android it is possible to override onBackPressed() and achieve that. But in Blazor I can't find a way to deal with it. I need to simply block Back event, without page reload, blinks and other possible side effects, like button was not pressed at all. There are a few JS hacks, but they leads to current page reload and this is not appropriate for me.

So is there any way to achieve that kind of native behavior in MAUI + Blazor on Android?

Upvotes: 5

Views: 1779

Answers (2)

Konstantinos
Konstantinos

Reputation: 11

I placed the code I used for my solution of a similar project resulting from a mix of answers i found online, since i haven't found something similar or as complete.

The concept is simple, the Android back event is captured and handled. Then the action is pushed to the app via a JS invoke.

Added the below to the main activity of Android Platform. Captures the back event and calls another class for action.

    public override bool DispatchKeyEvent(KeyEvent e)
      {
        if ((e.KeyCode == Keycode.Back) && (e.Action == KeyEventActions.Down))
        {
            Task<bool> Handled = BackButtonActionHandler.BackButtonActionAsync();
            Handled .ContinueWith(task =>
            {
                if (task.Result)
                {
                    PerformSomeAction();
                }
            });
            return true;
        }
        return base.DispatchKeyEvent(e);
    }

    public void PerformSomeAction()
    {
      
    }

Also, a public static class that is called and invokes a Js function waiting for a result.

        public static async Task<bool> BackButtonActionAsync()
        {
           bool result = await JsRuntime.InvokeAsync<bool>("backButtonAction");
           return result;
        }

then at Js

function backButtonAction() {
if (checkWhatever()) {
    return false;
}
else {
    return true;
}};

In a nutshell Back event in Android triggers a static class that JInvokes a Js. Then js responds to the static and the result is pushed to Back Event method.

Hope this helps :)

Upvotes: 1

martinstoeckli
martinstoeckli

Reputation: 24141

It seems that there is no way to do it in the Maui/Blazor classes (at least I couldn't find one), the MainPage.OnBackButtonPressed() is not called, when there is a back navigation possible, instead it automatically navigates backards.

What's possible though is to intercept it already in the MainActivity.cs:

public override bool DispatchKeyEvent(KeyEvent e)
{
    // Workaround: The back button will automatically navigate back if possible, it is not
    // possible to intercept it in MainPage.OnBackButtonPressed().
    if ((e.KeyCode == Keycode.Back) && (e.Action == KeyEventActions.Down))
    {
        bool handled = TryCloseCurrentlyOpenMenusOrDialogs();
        if (handled)
            return true;
    }
    return base.DispatchKeyEvent(e);
}

Upvotes: 5

Related Questions