Android Jetpack Compose Modal Bottom Sheet Bug

Question

I'm trying to implement a simple bottom sheet modal in Jetpack Compose with a text and a text field. Everything is looking good until I press on the text field and the keyboard appears. The problem is that the bottom sheet modal is pushed way to high. It seems like it gets bottom margin as double of the keyboards heigth.

Here is the code:

 var showBottomSheet by remember { mutableStateOf(false) }

 if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = { showBottomSheet = false },
            windowInsets = WindowInsets.ime,
            dragHandle = { BottomSheetDefaults.DragHandle() },
        ) {
            CollectionFormPage()
        }
    }

And here is the code for the modal content

@Composable
fun CollectionFormPage(
  collectionFormViewModel: CollectionFormViewModel = hiltViewModel(),
) {

    val state = collectionFormViewModel.state.collectAsState()

    Surface(
        modifier = Modifier
            .padding(start = 16.dp, end = 16.dp, bottom = 16.dp)
    ) {
        Column {
            Text(
                "Test", style = MaterialTheme.typography.titleMedium.copy(
                    color = MaterialTheme.colorScheme.onSurface
                )
            )
            TextField(
                modifier = Modifier.fillMaxWidth(),
                value = state.value.label,
                onValueChange = {
                    //TODO
                })
        }
    }
}

Answer 1

This problem has been fixed in the latest version. Just update please

implementation 'androidx.compose.material3:material3:1.2.0-alpha10'