Hey :wave: I have a ViewModel which has a `StateFlow<String>`. This flow is collected inside ...

# compose

[Nacho Ruiz Martin]

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.

[Albert Chang]

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

[Nacho Ruiz Martin]

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?

[Albert Chang]

Yes.

[Nacho Ruiz Martin]

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

[Albert Chang]

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

[Nacho Ruiz Martin]

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.

[Albert Chang]

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.

[Nacho Ruiz Martin]

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

[Nacho Ruiz Martin]

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

[Albert Chang]

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.

[Nacho Ruiz Martin]

Ok, that sounds reasonable, thanks.

[Zach Klippenstein (he/him) [MOD]]

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