Hello ! I have three underlying `BasicInputText` f...

# compose

[Hatice Sarp]

Hello ! I have three underlying BasicInputText for change password. I use focusRequester to focus with BasicInputText. When I enter the screen, the last textfield is focused and the cursor is in that textfield. How can I change it to put it in the first textfield?

[Zach Klippenstein (he/him) [MOD]]

Can you post your code?

[Hatice Sarp]

var oldPasswordText by remember { mutableStateOf(TextFieldValue()) }
var passwordText by remember { mutableStateOf(TextFieldValue()) }
var passwordAgainText by remember { mutableStateOf(TextFieldValue()) }

InputText(
    modifier = Modifier.fillMaxWidth(),
    textFieldValue = oldPasswordText,
    borderColor = Color.White ,
    onTextChanged = {   oldPasswordTextState = it  },
    placeholder = "Old password",
    visualTransformation = PasswordVisualTransformation(),
    keyboardType = KeyboardType.Password
)
Spacer(modifier = Modifier.height(2.dp))
InputText(
    modifier = Modifier.fillMaxWidth(),
    textFieldValue = passwordText,
    borderColor = Color.White,
    onTextChanged = {     passwordTextState = it  },
    placeholder = "New password",
    visualTransformation = PasswordVisualTransformation(),
    keyboardType = KeyboardType.Password
)
Spacer(modifier = Modifier.height(2.dp))
InputText(
    modifier = Modifier.fillMaxWidth(),
    textFieldValue = passwordAgain,
    borderColor = Color.White,
    onTextChanged = {     passwordAgainText = it  },
    placeholder = "New password again",
    visualTransformation = PasswordVisualTransformation(),
    keyboardType = KeyboardType.Password
)

[Hatice Sarp]

@Composable
fun InputText(
    modifier: Modifier = Modifier,
    onTextChanged: (TextFieldValue) -> Unit,
    textFieldValue: TextFieldValue,
    visualTransformation: VisualTransformation = VisualTransformation.None,
) {
    val focusRequester = FocusRequester()
    LaunchedEffect(key1 = Unit) {
        focusRequester.requestFocus()
    }
    var visualTrans by remember { mutableStateOf(visualTransformation) }

    Box(
        modifier = modifier
            .border(
                width = 2.dp,
                shape = RoundedCornerShape(8.dp)
            )
            .clickable(onClick = { focusRequester.requestFocus() })
    ) {

        BasicTextField(
            value = textFieldValue,
            onValueChange = onTextChanged,
            modifier = modifier
                .padding(16.dp)
                .focusRequester(focusRequester),
            keyboardOptions = KeyboardOptions(
                keyboardType =  KeyboardType.Text,
                imeAction = ImeAction.Send
            ),
            visualTransformation = visualTrans,
            maxLines = 1,
            cursorBrush = SolidColor(Color.White),
            textStyle = MaterialTheme.typography.body1.copy(color = Color.Black)
        )
}

[Zach Klippenstein (he/him) [MOD]]

You've got separate focus requesters for each text field, so basically you're initially requesting focus for all your fields at once. I guess those requests are processed in the order of composition, so the last InputText that is composed is the last one to request focus, and that's why you're seeing your last field getting initial focus.

This isn't really how FocusRequester is meant to be used, afaik. InputText shouldn't have any FocusRequester stuff itself, that should all be done by the surrounding composable. I'll post a snippet of what i mean in a sec

[Zach Klippenstein (he/him) [MOD]]

something like this. Note I made two other fixes:
• FocusRequester should be remembered
• In InputText, the incoming modifier should only be passed to the outer-most component – you were passing it to both the outer Box and the inner BasicTextField
• Removed the explicit focus request on click from the outer Box, since BasicTextField should already focus itself when clicked.
• Removed the outer Box entirely since the border modifier can just be passed directly to BasicTextField.

Untitled.kt

[Hatice Sarp]

Thank you for the detailed explanation. It really worked and I got it 🙂