Search code examples
androidkotlinandroid-jetpack-composeandroid-jetpack

Android Jetpack Compose Modal Bottom Sheet Bug


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
                })
        }
    }
}

Modal bottom sheet shown

Modal bottom sheet with huge bottom padding


Solution

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

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