# compose

Hey 👋 I have a ViewModel which has a StateFlow<String>. This flow is collected inside a Composable with .collectAsState(Dispatchers.Main.immediate) . The string inside is used as the value of a BasicTextField and the ViewModel has a function to update this value in the state. All goes as expected if the user is the one typing on the keyboard 👍 but, if a button is pressed on the interface, the value of the text field should be cleared a new value should be added as some kind of prefix (editable by the user, just as a helper). When I add this value in the ViewModel, the cursor of the text field stays at the beginning instead of moving to the end of the text. I have read this article: https://medium.com/androiddevelopers/effective-state-management-for-textfield-in-compose-d6e5b070fbe5. But I thought with Dispatchers.Main.immediate it should be all good? Thanks for the help.

Use TextFieldValue instead of String and use TextFieldValue(text = newString, selection = TextRange(newString.length)) when you replace the text.

I can’t actually because the ViewModel is done on KMP so no TextFieldValue there. I can store the string and the range separately, though, but I would like to delegate it to the OS. Is it expected that the cursor is kept at the beginning in this situation?

Yes.

It’s certainly unexpected given that pasting or inserting a suggestion in the keyboard makes the cursor move as expected.

It's because you are clearing the text once, which resets the cursor position.

When I said “clear” I meant just send the prefix to the text field, instead of the previous value + the prefix. Meaning that if the user wrote “hello world” in the text field, when the button is clicked, the text field will contain “@handle “, for example.

When you change the text (of the String overload), the cursor will be kept at its original position, unless the new text is shorter than cursor position, in which case the cursor will be moved to the end of the text.

But it does behave differently when you use the keyboard suggestions, for example. So the component is internally doing something with that, right?

Anyway, at least I know why it’s happening. Thanks! 👍 I will store the desired cursor position in the screen state.

Text field only uses TextFieldValue as state internally, and keyboard input will trigger updates of both text and selection (and potentially composition). The overload that takes String is just a wrapper that synchronizes the external String and the text of internal TextFieldValue.

Ok, that sounds reasonable, thanks.

TextFieldValue does support multiplatform, although unfortunately not kotlin/native yet.