Wrong behavior with bottomSheet Composable and keyboard in AnimatedNavHost

[bunjix]

trafficstars

Describe the bug

When using Navigation Material to display bottomSheet composable, I have an issue where the bottom sheet is not expanded when the content is too big and the keyboard opened.

To Reproduce

I've attached two video. The first one display a box in 16:9 ratio on top, and the content and when opening the keyboard it's ok. On the second video the ratio is now 4:3, resulting a bottom sheet too high. The bottomsheet is not appearing on top of the keyboard. That's my issue.

Expected behavior

The expected behavior in my cas is that the bottom sheet appear on top of the keyboard.

Screenshots?

https://user-images.githubusercontent.com/758587/138258691-76c001f3-0bfb-4afc-969f-1e9bb36dc434.mp4

https://user-images.githubusercontent.com/758587/138258379-b163487a-5726-4161-8c31-1b49b196b6e9.mov

Environment:

• Android OS version: Android 12
• Device: Pixel5
• Accompanist version: 0.20.0

Additional context

The code for this sample:

object Destinations {
    const val home = "home"
    const val sheetInput = "sheetInput"

    object SheetResult {
        private const val root = "sheetResult"
        const val input = "input"
        const val route = "$root/{$input}"
        fun route(value: String) = "$root/$value"
    }
}

class MainActivity : ComponentActivity() {
    @OptIn(
        ExperimentalMaterialNavigationApi::class,
        ExperimentalAnimationApi::class,
        ExperimentalComposeUiApi::class
    )
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        WindowCompat.setDecorFitsSystemWindows(window, false)
        setContent {
            NavigationBottomSheetInputTheme {
                ProvideWindowInsets {
                    val bottomSheetNavigator = rememberBottomSheetNavigator()
                    val navController = rememberAnimatedNavController()
                    navController.navigatorProvider += bottomSheetNavigator
                    ModalBottomSheetLayout(
                        bottomSheetNavigator,
                        modifier = Modifier.fillMaxSize(),
                    ) {
                        AnimatedNavHost(navController, Destinations.home,
                            enterTransition = { _, _ -> fadeIn(animationSpec = tween(300)) },
                            exitTransition = { _, _ -> fadeOut(animationSpec = tween(300)) }
                        ) {
                            composable(route = Destinations.home) {
                                Home(onclick = { navController.navigate(Destinations.sheetInput) })
                            }
                            addBottomSheet(navController)
                            composable(
                                route = Destinations.SheetResult.route,
                                arguments = listOf(
                                    navArgument(Destinations.SheetResult.input) { type = NavType.StringType },
                                )
                            ) { backStackEntry ->
                                val arguments = requireNotNull(backStackEntry.arguments)
                                Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                                    Text(text = arguments.getString(Destinations.SheetResult.input, ""))
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    @OptIn(ExperimentalMaterialNavigationApi::class, androidx.compose.ui.ExperimentalComposeUiApi::class)
    private fun NavGraphBuilder.addBottomSheet(navController: NavController) {
        bottomSheet(route = Destinations.sheetInput) {
            var input by remember { mutableStateOf("") }
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .navigationBarsWithImePadding()
                    .padding(20.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.spacedBy(20.dp)
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .aspectRatio(FailingRatio)
                        .background(Color.Blue)
                )
                OutlinedTextField(value = input, onValueChange = { text -> input = text })
                Button(onClick = {
                    navController.navigate(Destinations.SheetResult.route(input))
                }) {
                    Text("Continue")
                }
            }
        }
    }

    @Preview
    @Composable
    private fun Home(onclick: () -> Unit = {}) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .navigationBarsPadding(), contentAlignment = Alignment.Center
        ) {
            Button(onClick = onclick) {
                Text(text = "Sign-In")
            }
        }
    }
}

const val SuccessRatio = 16f/9f
const val FailingRatio = 4f/3f

[jossiwolf]

Thanks for the report! We will look into this in the next week but a fix might be delayed due to an upcoming refactoring. I'll keep this issue up-to-date :)

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[bunjix]

@jossiwolf did not tried the last update but do you know if this issue might be fixed?

[jossiwolf]

@bunjix I will run some tests again but still preparing the big refactoring; we haven't changed anything meanwhile so I don't expect it to be fixed. Sorry for the delay!

[jossiwolf]

@bunjix To clarify - does this only happen with AnimatedNavHost or with a regular NavHost as well? If it happens with a regular NavHost too, can you post the repro for that, please? :)

[bunjix]

@jossiwolf Just tried with a regular NavHost. Same result. Same repro for that issue. If you take my sample code and just change to use the NavHost and update import you will have exact same result.

[bunjix]

Hi @jossiwolf any idea? If I can help with more detail, let me know.

[jossiwolf]

Waiting on upstream work in Swipeable.

[jossiwolf]

v0.28.1 addresses this issue. Please let us know if you can still reproduce it with this version.

[joakimtall]

It seems only v0.28.0 is released, then its all alpha with 0.29 for compose 1.4. Any way to get this sooner?

[jossiwolf]

v.0.29.1-alpha and subsequent versions address this.

[ahmed2146]

we are still facing the same issue in compose 1.5.3

[dwane13]

@jossiwolf Hey, is there any updates about this issue? Still reproduces with bottom sheet and lazyColumn inside