Jetpack compose listener for keyboard actions (setOnKeyListener) (Textfield for SMS)

user_15342144 0
Viewed 3964

I have five TextFields. After something entered in first field focus moves for next textfield. If i deleted something in text field - focus moves for pervious textfield. All work with focus goes through onValueChanged section

But if value in textfield blank("") - if i press backspace in keyboard nothing happened with onValueChanged, because value in field not changed. And I needed somehow set focus on previous textfield

enter image description here

So how i can use listener for back press in soft-keyboard for text field in compose?

I tried use KeyboardActions,

keyboardActions = KeyboardActions(
                    onPrevious = {
                        //some work with foucs
                    },
                ),

but it not working

And second question: if textfield got clicked(or get focus) how to set cursor in field on end text?
I needed even if user click middle of string cursor sets on end.

event-listener android-jetpack-compose kotlin textfield android
2 Answers

With solution @nglauber Textfield for enter sms(for now):

@Composable
fun SMSTextFields(
    modifier: Modifier,
    smsCodeLength: Int = 5,
    whenFull: (smsCode: String) -> Unit
) {
    val enteredNumbers = remember {
        mutableStateListOf(
            *((0 until smsCodeLength).map { "" }.toTypedArray())
        )
    }
    val focusRequesters: List<FocusRequester> = remember {
        (0 until smsCodeLength).map { FocusRequester() }
    }
    Row(modifier = modifier.padding(start = 60.dp, end = 60.dp)) {
        (0 until smsCodeLength).forEach { index ->
            TextField(
                modifier = Modifier
                    .weight(1f)
                    .size(120.dp, 80.dp)
                    .onKeyEvent { event ->
                        val cellValue = enteredNumbers[index]
                        if (event.type == KeyEventType.KeyUp) {
                            if (event.key == Key.Backspace && cellValue == "") {
                                focusRequesters
                                    .getOrNull(index - 1)
                                    ?.requestFocus()
                                enteredNumbers[index - 1] = ""
                            } else if (cellValue != "") {
                                focusRequesters
                                    .getOrNull(index + 1)
                                    ?.requestFocus()
                            }
                        }
                        false
                    }
                    .padding(vertical = 2.dp)
                    .focusOrder(focusRequesters[index])
                    .focusRequester(focusRequesters[index]),
                colors = TextFieldDefaults.textFieldColors(
                    backgroundColor = whiteBackground,
                    unfocusedIndicatorColor = greyColor,
                    focusedIndicatorColor = signUpColorButton,
                    cursorColor = greyColor,
                    textColor = greyColor
                ),
                textStyle = smsCodeEnterStyle,
                singleLine = true,
                value = enteredNumbers[index],
                onValueChange = { value: String ->
                    if (value.isDigitsOnly()) {
                        if (value.length > 1) {
                            enteredNumbers[index]  = value.last().toString()
                            return@TextField
                        }
                        if (focusRequesters[index].freeFocus()) {
                            enteredNumbers[index] = value
                            if (enteredNumbers[index].isBlank() && index > 0 && index <5) {
                                focusRequesters[index - 1].requestFocus()
                            } else if (index < smsCodeLength - 1) {
                                focusRequesters[index + 1].requestFocus()
                            }
                            else if (enteredNumbers.size == 5){
                                whenFull(enteredNumbers.joinToString(separator = ""))
                            }
                        }
                    }
                },
                keyboardOptions = KeyboardOptions.Default.copy(
                    keyboardType = KeyboardType.Number,
                    imeAction = ImeAction.Next
                ),
            )
            Spacer(modifier = Modifier.width(4.dp))
        }
    }
}
user_153421440 
@ExperimentalComposeUiApi
@Composable
fun EnterOtpView() {
    val scrollState = rememberScrollState()
    val focusManager = LocalFocusManager.current
    val digits = remember {
        mutableStateListOf(
            *((0 until 4).map { "" }.toTypedArray())
        )
    }
    val focusRequesters: List<FocusRequester> = remember {
        (0 until 4).map { FocusRequester() }
    }
    Column(
        Modifier.padding(horizontal = 70.dp),  
        verticalArrangement = Arrangement.Top,
        horizontalAlignment = Alignment.CenterHorizontally,

        ) {
        Text(
            text = "123 456 8550", style = MaterialTheme.typography.h3, color = Purple,
            modifier = Modifier.padding(top = 20.dp, bottom = 30.dp)
        )
        Row(
            modifier = Modifier
                .fillMaxWidth(1f)
                .wrapContentHeight(),
            Arrangement.SpaceBetween,
            Alignment.CenterVertically
        ) {
            (0 until 4).forEach { index ->
                TextField(
                    modifier = Modifier
                        .weight(0.2f)
                        .padding(end = 4.dp)
                        .onKeyEvent {
                            if (it.nativeKeyEvent.keyCode == 67) {
                                if (digits[index].isEmpty()) {
                                    focusManager.moveFocus(FocusDirection.Left)
                                }
                                digits[index] = ""
                            }
                            true
                        }
                        .padding(vertical = 2.dp)
                        .focusOrder(focusRequesters[index])
                        .focusRequester(focusRequesters[index]),
                    colors = TextFieldDefaults.textFieldColors(
                        backgroundColor = Color.Transparent
                    ),
                    singleLine = true,
                    textStyle = MaterialTheme.typography.body1.copy(textAlign = TextAlign.Center),
                    value = digits[index],
                    onValueChange = {
                        if (digits[index].isEmpty() && it.isDigitsOnly()) {
                            digits[index] = it
                            focusManager.moveFocus(FocusDirection.Right)
                        }
                    },
                    keyboardOptions = KeyboardOptions(
                        imeAction = ImeAction.Next,
                        keyboardType = KeyboardType.Number
                    ),
                    keyboardActions = KeyboardActions(
                        onNext = {
                            focusManager.moveFocus(FocusDirection.Right)
                        }
                    )
                )
            }
        }
}}

Worked for me using nativeKeyEvent and focusManager.

user_47834420
Related