https://kotlinlang.org logo
#compose
Title
# compose
s

Shreyas Patil

12/18/2021, 6:49 AM
While exploring 
TextField
 in a Jetpack Compose, I came across a case where I have to modify input typed in the field. For example, adding a comma after entering 3 characters. This is how I made it.
Copy code
@Composable
fun TFDemo() {
    var fieldValue by remember { mutableStateOf(TextFieldValue("")) }

    TextField(
        value = fieldValue,
        onValueChange = {
            val newMessage = it.text.let { text -> if (text.length == 3) "$text," else text }
            fieldValue = it.copy(newMessage, selection = TextRange(newMessage.length))
        },
        keyboardOptions = KeyboardOptions(autoCorrect = false),
    )
}
But after running it, I realized that after the comma is added, keyboard view changed back to alphabets from numbers/symbols which should not be the case. See video output below for clarity As you can see in the below video when I typed "111" comma was appended and suddenly keyboard's numeric view changed to alphabets again. Stackoverflow: https://stackoverflow.com/questions/70401519/android-jetpack-compose-keyboard-changing-from-numeric-to-alphabets-after-modif
s

Stylianos Gakis

12/19/2021, 1:47 PM
This may not solve this problem, but as a temporary fix, maybe try looking into VisualTransformation instead?
s

Shreyas Patil

12/19/2021, 2:05 PM
Yeah, VisualTransformation thing worked for me
🎉 1