Android Compose ModalBottomSheet works incorrectly

369 Views Asked by At

I am developing an Android app using the Jetpack compose.

I need a BottomSheet ui. So I am trying to use androidx.compose.material3.ModalBottomSheet.

When it shows up, it looks like working fine. But my bottom sheet has a BasicTextField, and when Keyboard is shows up, the BottomSheet works incorrectly like:

enter image description here

My code is simple:

Fragment:

class MyFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                SandboxTheme {
                    MyScreen(vm = vm)

                    MyBottomSheet()
                }
            }
        }
    }
}

MyBottomSheet:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TagInputBottomSheet(
    onDismiss: () -> Unit,
    onTagInput: (String) -> Unit
) {
    ModalBottomSheet(
        onDismissRequest = onDismiss,
        sheetState = rememberModalBottomSheetState(),
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(20.dp)
        ) {
            var tagText by remember { mutableStateOf("") }
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(92.dp)
            ) {
                if (tagText.isBlank()) {
                    Text(
                        text = "Input Text",
                        style = TextStyle(
                            color = Color.Black.copy(alpha = 0.3F),
                            fontSize = 16.sp
                        )
                    )
                }

                val focusRequester = remember { FocusRequester() }
                BasicTextField(
                    value = tagText,
                    onValueChange = {
                        if (it.length <= 20) {
                            tagText = it
                        }
                    },
                    modifier = Modifier
                        .fillMaxWidth()
                        .focusRequester(focusRequester),
                    textStyle = TextStyle(
                        color = Color(0xFF1A1A1A), // Gray90
                        fontSize = 16.sp,
                    ),
                    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
                    keyboardActions = KeyboardActions(onDone = {
                        if (tagText.isNotEmpty()) {
                            onTagInput(tagText)
                        }
                    }),
                    singleLine = true
                )
                LaunchedEffect(Unit) {
                    focusRequester.requestFocus()
                }
            }

            VerticalSpacer(size = 20.dp)

            Text(
                text = "${tagText.length}/20",
                modifier = Modifier.align(Alignment.End),
                fontSize = 10.sp
            )
        }
    }
}

What's the problem? Is this the bug of androidx.compose.material3.ModalBottomSheet? How can I solve this problem?


I ran this app into the Pixel 7 emulator and it works fine :( The problem is only reproduced in Samsung Galaxy Device...


This looks like the bug.

I create an issue: https://issuetracker.google.com/issues/300157687

0

There are 0 best solutions below