CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
KSDev
KSDev

Reputation: 261

Keyboard appears behind the BottomSheetModal instead of above it in jetpack compose

I am using ModalBottomSheet of material 3 library and I noticed a strange behavior when i want to type in the OutlinedTextField. That's a weird issue which i couldn't manipulate.

        Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Row(
            Modifier.toggleable(
                value = skipHalfExpanded,
                role = Role.Checkbox,
                onValueChange = { checked -> skipHalfExpanded = checked }
            )
        ) {
            Checkbox(checked = skipHalfExpanded, onCheckedChange = null)
            Spacer(Modifier.width(16.dp))
            Text("Skip Half Expanded State")
        }
        Button(onClick = { openBottomSheet = !openBottomSheet }) {
            Text(text = "Show Bottom Sheet")
        }
    }

// Sheet content
    if (openBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = { openBottomSheet = false },
            sheetState = bottomSheetState,
        ) {
            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
                Button(
                    // Note: If you provide logic outside of onDismissRequest to remove the sheet,
                    // you must additionally handle intended state cleanup, if any.
                    onClick = {
                        scope.launch { bottomSheetState.hide() }.invokeOnCompletion {
                            if (!bottomSheetState.isVisible) {
                                openBottomSheet = false
                            }
                        }
                    }
                ) {
                    Text("Hide Bottom Sheet")
                }
            }
            InputTextField()
        }
    }

enter image description here

Any solution would be appreciated.

UPDATE!!!! There is an existing report on google issue tracker site.

https://issuetracker.google.com/issues/268380384?pli=1

Upvotes: 6

Views: 2270

Answers (1)

es0329
es0329

Reputation: 1432

I haven't done this in Material3 yet; but what happens if you rearrange your implementation to look more like this?

ModalBottomSheetLayout(
    sheetState = sheetState,
    sheetContent = { YourBottomSheet() }
) {
    YourPrimaryScreen()
}

Upvotes: -3

Related Questions