Hey. Is there any updates about this kind of API? <https://kotlinlang.slack.com/archives/CJLTWPH7S/p...

# compose

[raenardev]

Hey. Is there any updates about this kind of API?
https://kotlinlang.slack.com/archives/CJLTWPH7S/p1596215337162600

I needed to do something like TextInputLayouts prefix - to create phone prefix for input field.

Since i needed only visual part, and didn’t need to modify resulting string -> i ended up making it work with VisualTransformation

But what if i need to filter out some characters or modify resulting string in some way?

phone_input.mov

[Siyamed]

You already have to modify string, so i guess it is that you change the string that is passed in.

[Siyamed]

Compose will inform the rejection or change to ime (afaik by restarting the input)

[Siyamed]

I ak also not sure what is 'modifying string'

[raenardev]

Say i want to filter out some characters:

val fixedPhone = phone.filterNot { it in 'a'..'z' }

I guess i can do that higher up, while forming a state for input, since we don’t store state in it anymore.

But what happens with that - is cursor jumps to next character everytime i input a letter instead of number.

IIRC with InputFilter i didn’t move cursor in such case - pressing invalid character just did nothing.

[Siyamed]

I didnt check input code but:
• ime says this is new string, this is where cursor is
• If app want to change state, moves to state to something it would like (i.e. reject a char and put the cursor back)
• Compose informs ime to restart the input with the given cursor and input

[Siyamed]

Not sure what exactly Input Filter was doing but there is not much to do other than the flow above. It is possible that inoutfilter was trying to be clever, but now cursor can be set at the same callback/input flow

[Siyamed]

If there is a bug in that flow please feel free to create a ticket. But at the end of the day there is one state on ime side and 'almost' none on compose

[Siyamed]

So that case, putting the cursor back where it should be, becomes an app concern. It is possible to write some utilities once we know better about use cases or an api. InputFilter api didnt look applicable to TextField because of the state hoisting

[Siyamed]

I will try to implement an example like that to see what happens.

[raenardev]

InputFilter api didnt look applicable to TextField because of the state hoisting

Yeah, i agree

putting the cursor back where it should be, becomes an app concern

Is there an API for that available now?
Say i have made changes to phone string. I would pass modified string to PhoneInput to render.

But what about cursor position?

@Composable
fun PhoneInput(phone: String, onPhoneChanged: (String) -> Unit) {
    BasicTextField(value = phone, onValueChange = onPhoneChanged)
}

[Siyamed]

There is a TextFieldValue overload of the same function

[Siyamed]

TextFieldValue.selection is the cursor when the TextRange in it has the same start/end

[raenardev]

Awesome! And the same is true for onValueChange
Seems like i have everything i need for now, will try it out tomorrow.

Thank you 🙂

[raenardev]

Also - it would be really helpful to have this info (about filtering some input and working with TextFieldValue.selection) somewhere in the docs:
https://developer.android.com/jetpack/compose/text#enter-modify-text
I searched for this for a while, before coming to slack.

Again, tnx for your quick response 🙂

[Siyamed]

Cc @yrezgui