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:
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