Keyboard pushes ModalBottomSheet too high

87 Views Asked by At

Im getting this weird issue with Material3 1.1.2, but seems to be fixed in 1.2.0-beta, although beta has other issues so im trying to figure out if anyone has found a solution. If you have a ModalBottomSheet that takes up only partial screen, and a keyboard comes out, it pushes all of the content above 2x the height it should. When keyboard is hidden, the padding is fine. I have tried changing the setSoftInputMode and adding imePadding or safePadding etc, but no luck. its always the same. I can get it to work if the Modal is full screen, but thats not the desired effect i want.

Keyboard pushing Modal above expected

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    var showModal = remember { mutableStateOf(false) }
    val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
    var message by rememberSaveable { mutableStateOf("") }

    Box(modifier = Modifier.fillMaxSize()) {
        Button(
            modifier = Modifier.height(42.dp),
            onClick = { showModal.value = true })
        {
            Text(text = "expand modal")
        }
    }

    if (showModal.value) {
        ModalBottomSheet(
            sheetState = bottomSheetState,
            dragHandle = null,
            onDismissRequest = { showModal.value = false }
        ) {
            Box(
                modifier = Modifier
                    .height(300.dp)
                    .padding(bottom = 32.dp),
                contentAlignment = Alignment.BottomCenter
            ) {
                Row(
                    modifier = Modifier
                        .padding(
                            start = 16.dp,
                            end = 16.dp,
                            bottom = 16.dp
                        )
                        .fillMaxWidth()
                        .wrapContentHeight(),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Center
                ) {
                    BasicTextField(
                        value = message,
                        onValueChange = { newValue -> message = newValue },
                        keyboardOptions = KeyboardOptions(
                            keyboardType = KeyboardType.Text,
                            imeAction = ImeAction.Default
                        ),
                        textStyle = TextStyle(color = Color.Black),
                        cursorBrush = SolidColor(Color.Black)
                    ){ innerTextField ->
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .border(
                                    width = 2.dp,
                                    color = Color.Gray,
                                    shape = RoundedCornerShape(size = 16.dp)
                                )
                                .padding(8.dp)
                        ) {
                            innerTextField()
                        }
                    }
                }
            }
        }
    }
}
0

There are 0 best solutions below