How to maintain cursor at the end in a Textfield after VisualTransformation in Jetpack Compose

Question

I've a problem , I'm trying to generate a VisualTransformation (Custom) similar to credit card but after that the cursor left to stay at the end of text and can't be placed a the end of text anymore:

Even if i try to move him to the end or add more text he can't be placed at the end again!!! code is (assigned to TextField) :

visualTransformation = {
                TransformedText(
                    buildAnnotatedString {
                         if (it.text.isNotEmpty()){
                             when(it.text.length){
                                 in 3..5 -> {
                                     append("${java.lang.StringBuilder(it.text).insert(1,"-")}")
                                 }
                                 in 6..12 -> {
                                     val tempIt=java.lang.StringBuilder(it.text).insert(1,"-")
                                     append("${java.lang.StringBuilder(tempIt).insert(6,"-")}")
                                 }
                                 else -> append(it.text)
                             }
                         }
                         else{
                             append(it.text)
                         }
                    },
                    OffsetMapping.Identity
                )
            }

What I want is that the cursor always stays at the end of the text!!

score 0 · Accepted Answer · answered Nov 08 '22 at 07:53

You can't use OffsetMapping.Identity as OffsetMapping because the original text and the returned text don't have the same length.
You have to provide your logic to calculate the bidirectional offset mapping between original and transformed text.

Something like:

    visualTransformation = {

        val numberOffsetTranslator = object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int {
                if (offset <= 2) return offset
                if (offset <= 5) return offset +1
                if (offset <= 12) return offset +2
                return offset
            }

            override fun transformedToOriginal(offset: Int): Int {
                if (offset <=3) return offset
                if (offset <=6) return offset -1
                if (offset <=13) return offset -2
                return offset
            }
        }

        TransformedText(

            buildAnnotatedString {
                //your code
            },numberOffsetTranslator
        )
    }

Thanks it works but additional to that, this condition is needed on both override methods: if(offset >= 13) return it.text.length otherwise an error will occur if write in textfield with visual transformation first then in another textfield and then comeback to the textfield with visual transformation — Richard Víquez Pérez, Nov 10 '22 at 19:32

How to maintain cursor at the end in a Textfield after VisualTransformation in Jetpack Compose

1 Answers1