Requesting focus on a BasicTextField in Jetpack Compose

Viewed 250

I have simple LazyColumn where each row contains a BasicTextField (the rows contain label names which can be changed). The row's state is set to "editMode" when it is clicked. Only then I want the BasicTextField to be editable, which makes the edit icons visible. However, I have to click two times on the row, but I want it to set focus on the TextField when the row is clicked for the first time. Using the focusRequest just does not work (nothing happens). Where could the problem be? Here is the code:

val focusRequester = FocusRequester()
val inputService = LocalTextInputService.current

Row(
        modifier = modifier
            .fillMaxWidth()
            .height(48.dp)
            .clickable(enabled = true) {
                onLabelClick() // here I set the editMode = true
                inputService?.showSoftwareKeyboard()
                focusRequester.requestFocus()
            }
            .padding(8.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Box(
            modifier = Modifier.weight(1f)
        ) {
            BasicTextField(
                modifier = Modifier
                    .fillMaxSize()
                    .focusRequester(focusRequester)
                    .focusable(enabled = true),
                value = tmpLabelName,
                onValueChange = {
                    tmpLabelName = it
                },
                enabled = editMode,
                singleLine = true,
                textStyle = MaterialTheme.typography.body1,
                decorationBox = { innerTextField ->
                    Box(
                        contentAlignment = Alignment.CenterStart
                    ) {
                        if (tmpLabelName.isEmpty()) {
                            // show hint if text is empty
                            Text(
                                text = stringResource(id = R.string.enter_label_name)
                            )
                        } else {
                            innerTextField()
                        }
                    }
                }
            )
        }

        AnimatedVisibility(
            visible = editMode,
            enter = slideInHorizontally(
                initialOffsetX = { fullWidth ->
                    fullWidth / 2
                }
            ),
            exit = fadeOut()
        ) {
            Row {
                IconButton(onClick = {
                    onLabelSaveClick(
                        label.name, tmpLabelName
                    )
                }) {
                    Icon(
                        imageVector = Icons.Filled.Check,
                        contentDescription = stringResource(id = R.string.save_label_changes)
                    )
                }

                IconButton(onClick = {
                    onLabelDeleteClick(label.name)
                }) {
                    Icon(
                        imageVector = Icons.Filled.Delete,
                        contentDescription = stringResource(id = R.string.delete_label)
                    )
                }
            }
        }
    }
0 Answers
Related