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

Faruk · Accepted Answer · 2023-11-17 18:59:00Z

2

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

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

answered Nov 17, 2023 at 18:59

Faruk

1,6311 gold badge6 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Faruk Over a year ago

you are welcome. if it okey you can mark it as the correct answer.

Erick Sorto Over a year ago

The problem still occurs for me after updating dependencies.

Unique Identifier Over a year ago

@ErickSorto The issue has been fixed in Version 1.3.0-alpha02 developer.android.com/jetpack/androidx/releases/… "ModalBottomSheet and StandardBottomSheet animation spec is now a TweenSpec, updated from a spring animation. This resolves an issue with a visible overshoot."

Collectives™ on Stack Overflow

Android Jetpack Compose Modal Bottom Sheet Bug

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related