https://kotlinlang.org logo
#compose
Title
# compose
a

alaershov

02/27/2024, 12:21 PM
Hey Composers! I have a question about Material 3 ModalBottomSheet and handling the Back button I want to forbid closing current bottom sheet depending on some logical state - for instance, if a critical action is in progress, don't allow closing the sheet. I was able to make it work in Material 2 implementation, and now I'm struggling with Material 3.
ModalBottomSheet
has SheetState, which has confirmValueChange - a callback that I use to forbid
ModalBottomSheet
dismiss depending on its logical state. This works fine with "tap outside sheet" and "drag sheet down" dismiss actions. However, a system Back button press does not respect
confirmValueChange
- it just dismisses the sheet without any hesitation. There are ModalBottomSheetProperties, such as
shouldDismissOnBackPress
. Unfortunately, setting
shouldDismissOnBackPress=false
just disables the back button completely - the sheet's Window intercepts it, but does nothing.
BackHandler
also doesn't work, as it requires underlying support in the implementation of Window.
Dialog
composable has this support, but not
ModalBottomSheet
. Basically, I want everything to work exaclty as it does, except make back button press respect
confirmValueChange
. I even tried copying MaterialBottomSheet sources to modify this behavior, but it's a banana-monkey-jungle problem, too much stuff is
internal
. Any advice on how to make this work? Thanks in advance!
j

Joel Denke

02/27/2024, 12:25 PM
You need to override the back press dispatcher API as well, to ignore back press. Or using BackHandler. I can also throw in I strongly advice using this UX pattern, never block user from pressing back to close. If critical action, just re-open it again next time same action need to happen imo or something else 🙂
a

alaershov

02/27/2024, 12:28 PM
You're absolutely right about the UX side, but the technical question still stands) BackHandler does not work in Material 3 Bottom Sheet - it opens as a Window (ModalBottomSheetWindow to be precise), and it lacks support for back handlers
j

Joel Denke

02/27/2024, 12:30 PM
Dont use the bottomsheet at all for back handling is what I am saying 🙂 Ignore whatever Google doing.
a

alaershov

02/27/2024, 12:31 PM
I open Material 3 bottom sheet, and there is no way to override it's back button handling. I can either disable it completely (then nothing happens, as back press is handled by sheets Window anyway), or go with the default implementation
j

Joel Denke

02/27/2024, 12:32 PM
Just do like:
Box {
BackHandler()
ModalBottomSheet()
}
a

alaershov

02/27/2024, 12:33 PM
this back handler will be ignored becasue Window inside ModalBottomSheet intercepts back presses
j

Joel Denke

02/27/2024, 12:35 PM
I am using like this without any issues:
Copy code
val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
        val coroutineScope = rememberCoroutineScope()
        BackHandler(enabled = sheetState.isVisible) {
            coroutineScope
                .launch { sheetState.hide() } // Ignore in your case
                .invokeOnCompletion {
                    if (!sheetState.isVisible) {
                        // do something
                    }
                }
        }

        ModalBottomSheet(
            modifier = Modifier.fillMaxWidth(),
            content = {
                content(model)
            },
            sheetState = sheetState,
            onDismissRequest = { navigator.finish(onDismiss()) },
        )
Not sure what you mean with WIndow inside intercept, why would it do that?
a

alaershov

02/27/2024, 12:36 PM
are you sure your backhandler works? because by default ModalBottomSheet will intercept back press and will close internally.
j

Joel Denke

02/27/2024, 12:37 PM
Yeah it works
a

alaershov

02/27/2024, 12:37 PM
Not sure what you mean with WIndow
Material 3 Bottom Sheet is implemented internally as a ModalBottomSheetWindow. It handles back press, because if you have more than one open Window, the back press is dispatched to the topmost one, which is ModalBottomSheetWindow
j

Joel Denke

02/27/2024, 12:38 PM
One major difference in my case I am using Circuit Overlay to display the bottomsheet, if that impacts maybe 🙂
a

alaershov

02/27/2024, 12:38 PM
Yeah it works
try removing everything inside your BackHandler - I bet back button will still close your bottom sheet
what is Circle Overlay?
"try removing everything inside your BackHandler - I bet back button will still close your bottom sheet" Yeah ofc as I want it to be dismissed 😛 But I will try what you say, to check, sounds interesting.
a

alaershov

02/27/2024, 12:42 PM
I mean it just as a scientific experiment) If you think your BackHandler works - try removing it. If back press still works, then maybe it wasn't working due to BackHandler after all)
j

Joel Denke

02/27/2024, 12:44 PM
Yeah its interesting, seems still work.
🦜 1
a

alaershov

02/27/2024, 12:44 PM
> I am using Circuit Overlay yeah, this could be it as well, there is some under-the-hood magic in Circuit for sure
j

Joel Denke

02/27/2024, 12:44 PM
Circuit 😄
💯 1
Adding
properties = ModalBottomSheetDefaults.properties(shouldDismissOnBackPress = false)
ignores back press on bottomsheet. WIll now try combine everything to see how behaves.
Right, yeah I get same problem as you now, sorry 😄
a

alaershov

02/27/2024, 12:45 PM
yes it does, but it does NOT make backhandler work!
Thanks, friend, at least now I know I'm not insane)
TL;DR of the thread for future brave heroes: the problem in the original post is reproducible and not solved yet)
j

Joel Denke

02/27/2024, 12:53 PM
I got interested and will check source code of what the heck Google did here, seems insane.
a

alaershov

02/27/2024, 12:56 PM
You're in for a wondrous journey)
j

Joel Denke

02/27/2024, 1:11 PM
Haha yeah kill me, are we going back in time with WIndowManager now 😄 I will stop using Googles things if this is the new thing
Feels like DIalogFragment but for Compose AbstractView now 😄
a

alaershov

02/27/2024, 1:14 PM
Yeah, looks not ideal, to say the least
j

Joel Denke

02/27/2024, 1:14 PM
Copy code
override fun onAttachedToWindow() {
        super.onAttachedToWindow()

        maybeRegisterBackCallback()
    }

    override fun onDetachedFromWindow() {
        super.onDetachedFromWindow()

        maybeUnregisterBackCallback()
    }

    private fun maybeRegisterBackCallback() {
        if (!properties.shouldDismissOnBackPress || Build.VERSION.SDK_INT < 33) {
            return
        }
        if (backCallback == null) {
            backCallback = Api33Impl.createBackCallback(onDismissRequest)
        }
        Api33Impl.maybeRegisterBackCallback(this, backCallback)
    }

    private fun maybeUnregisterBackCallback() {
        if (Build.VERSION.SDK_INT >= 33) {
            Api33Impl.maybeUnregisterBackCallback(this, backCallback)
        }
        backCallback = null
    }
This wants me go hide and never look at this code again ...
💯 1
s

Stylianos Gakis

02/27/2024, 2:53 PM
Is it possible that you are using
enableOnBackInvokedCallback
on your manifest and not the latest material3 library and are hitting this https://issuetracker.google.com/issues/281967264?
a

alaershov

02/27/2024, 3:09 PM
Thanks, but sadly no( dismiss works fine, and the code is the same, there just isn't enough customization options, and I have to copy-paste the entire thing to tweak it. Open/closed principle is too closed in this case)
👍 1
1
a

Alex Vanyo

02/27/2024, 4:46 PM
Which material3 version are you reproducing the issue with?
j

Joel Denke

02/27/2024, 4:51 PM
Not sure if @alaershov using same, but I use: https://github.com/JetBrains/compose-multiplatform/releases/tag/v1.6.0-rc03 Which refers to version Material3 1.2.0 Thats reproduce the issue for me as well. I think there was some kind of bug fix for this in M2 1.3.0.alpha01 or? I refer to https://issuetracker.google.com/issues/281967264#comment7
a

alaershov

02/28/2024, 5:30 AM
1.2.0 for me as well, using BOM 2024.02.01
I don't thinkk this is the fix @Joel Denke, looks more like additional support for predictive back on the newest API
@Alex Vanyo can you tell us if ignoring confirmValueChange is a deliberate design decision for back button handling in Material 3 ModalBottomSheet? It's a reasonable default for sure, but would be nice to allow the user to customize it.