Compose - TextField - SelectAllOnFocus

Question

If we want our TextField to have an equivalent behaviour to EditText:selectAllOnFocus = "true" we can do something like create a TextFieldValue and set the selection from zero to lenght like TextRange(0, text.length)

This works and when user focus the TextField the whole text get selected, the problem is that when we create a TextFieldValue we need to set selection, the default value is Zero.

If the user wants to drag the cursor he just cant. Is there a way for now to create a selectAllOnFocus behaviour that allows the user to drag the cursor all over the text if he wants to in compose?

Is this what you want: https://stackoverflow.com/questions/68244362/select-all-text-of-textfield-in-jetpack-compose — Johann, Nov 23 '21 at 13:34
I've tried this, this way you cant drag cursor on TextField.... — Ivan Regados, Nov 23 '21 at 13:38
Not sure what you mean by "drag cursor". Once the cursor is visible, you can drag it wherever you want. — Johann, Nov 23 '21 at 13:39
you cant, i think that it recompose with textFieldValue and reset the cursor position, not sure about that — Ivan Regados, Nov 23 '21 at 13:43
Do you want an editable selection? so you can drag the two point and copy, cut etc — zjmo, Nov 23 '21 at 14:20
I can try to set it and see if it fits the behaviour that I expect...do you know a place where I can see how to implement it ? — Ivan Regados, Nov 23 '21 at 14:24

score 1 · Answer 1 · answered Nov 23 '21 at 14:33

Yes I think one way is to follow the result selection coming from the TextField onValueChange callback:

var editableText by rememberSaveable { mutableStateOf("some text") }
val textRangeStart = rememberSaveable { mutableStateOf(0) }
val textRangeEnd = rememberSaveable { mutableStateOf(0) }
val textField = remember(editableText, textRangeEnd.value, textRangeStart.value) {
    mutableStateOf(
        TextFieldValue(
            text = editableText ?: "",
            selection = TextRange(textRangeStart.value, textRangeEnd.value)
        )
    )
}
TextField(
        modifier = Modifier.fillMaxSize(),
        value = textField.value,
        placeholder = { Text("") },
        onValueChange = {
            textEditorViewModel.editableText.value = it.text
            textRangeStart.value = it.selection.start
            textRangeEnd.value = it.selection.end
        }
    )
}

it worked, in the end I just need to keep track of textRangeStart and textRangeEnd to allow user to drag cursor around, thanks! — Ivan Regados, Nov 23 '21 at 21:27

Compose - TextField - SelectAllOnFocus

1 Answers1