Cursor position is displayed on the left edge when textAlign is set to center in BasicTextField
y-sugitani opened this issue · comments
Describe the bug
When setting textAlign to TextAlign.Center in BasicTextField (and TextField) on iOS, the cursor position is displayed on the left edge when focused. On Android, it is displayed in the center as expected.
Affected platforms
- iOS
Versions
- Kotlin version: 1.9.23
- Compose Multiplatform version: 1.6.2
- OS version(s): iOS 17.4
- Device: iPhone 15 Pro Simulator
To Reproduce
- Create a new Compose Multiplatform project
- Add the following code:
@Composable
@Preview
fun App() {
var text by remember { mutableStateOf("") }
MaterialTheme {
BasicTextField(
value = text,
onValueChange = { text = it },
modifier = Modifier
.fillMaxWidth()
.background(Color.LightGray)
.padding(18.dp),
maxLines = Int.MAX_VALUE,
textStyle = TextStyle.Default.copy(
textAlign = TextAlign.Center,
),
)
}
}
- Run the app on an iOS Simulator
- Tap the BasicTextField to focus it
- The cursor is displayed on the left edge
Expected behavior
Since textAlign in BasicTextField is set to TextAlign.Center, the cursor should be displayed in the center of the text field on iOS, just like on Android.
Screenshots
Additional context
The same behavior was observed when using TextField. Regardless of the textAlign value, the cursor is always displayed on the left edge on iOS.
A reproducible project is available at https://github.com/blackcat-carnival/compose-bugreport-202404-01
I reproduced it on a JVM as well
CursorIssue-all.zip