Compose BasicTextField, drag cursor text doesn't scroll

Question

I'm using Compose's BasicTextField, and when I drag the cursor, the text doesn't scroll.

var text by remember { mutableStateOf("123456789123456") }

Box(contentAlignment = Alignment.Center) {
    BasicTextField(
        modifier = Modifier
            .width(100.dp)
            .height(40.dp)
            .background(color = Color.LightGray)
            .wrapContentHeight(align = Alignment.CenterVertically),
        textStyle = TextStyle.Default.copy(
            fontSize = 14.sp, fontWeight = FontWeight.Bold,
            textAlign = TextAlign.Center,
        ),
        value = text,
        singleLine = true,
        onValueChange = { text = it },
    )
}

When I drag the cursor, I want the text to scroll along with it. Instead, this is what's happening:

the sample gif

The code is correct and it should work properly, you might have another issue in your case — Megh Lath
– Megh Lath, Commented Mar 4 at 7:40
Try adding .horizontalScroll(rememberScrollState()) in modifier if issue still persists — Megh Lath
– Megh Lath, Commented Mar 4 at 7:46
@MeghLath: Have you actually tried it? It doesn't work for me. Neither does adding horizontalScroll help. Using the new BasicTextField as outlined in my answer, however, seems to help. — tyg
– tyg, Commented Mar 4 at 10:19
@Megh Lath:At first, I suspected the issue was with my own project, so I created a brand-new project in Android Studio that only contained the code snippet above. However, the issue still persisted. Later, I downloaded the Android team's Compose project, JetCaster, and found the same problem existed there as well. — seven years
– seven years, Commented Mar 6 at 2:23
Yeah i tried your code snippet and it worked fine for me. I had just placed your code in @Preview composable and it was working fine — Megh Lath
– Megh Lath, Commented Mar 6 at 4:16

tyg · Accepted Answer · 2025-03-04 10:26:30Z

1

I'm a bit surprised myself that your code does not work, but switching to the new BasicTextField that uses a TextFieldState instead of a String value fixes it:

val state = rememberTextFieldState("123456789123456")

BasicTextField(
    modifier = Modifier
        .width(100.dp)
        .height(40.dp)
        .background(color = Color.LightGray)
        .wrapContentHeight(align = Alignment.CenterVertically),
    textStyle = TextStyle.Default.copy(
        fontSize = 14.sp, fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Center,
    ),
    state = state,
    lineLimits = TextFieldLineLimits.SingleLine,
)

Use state.text to access the text field's content. It's backed by a MutableState so you can easily observe it for changes in Compose or by using a snapshotFlow outside of Compose.

edited Mar 4 at 10:26

answered Mar 4 at 10:14

tyg

20.8k5 gold badges46 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Compose BasicTextField, drag cursor text doesn't scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related