While exploring `TextField` in a Jetpack Compose, I came across a case where I have to modify input ...

# compose

[Shreyas Patil]

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.

@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

Android Emulator - Pixel_API_29_5554 2021-12-18 12-02-42.mp4

[Stylianos Gakis]

This may not solve this problem, but as a temporary fix, maybe try looking into VisualTransformation instead?

[Shreyas Patil]

Yeah, VisualTransformation thing worked for me

[Shreyas Patil]

Here's solution: https://blog.shreyaspatil.dev/filtering-and-modifying-text-input-in-jetpack-compose-way