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.
@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()
}
}
}
}
}
}
}