1

I am implementing a PasswordInput composable using Jetpack compose, which is literally one of the examples provided by the Android developers website:

@Composable
fun PasswordInput() {
    var password by remember { mutableStateOf("admin") }

    TextField(
        value = password,
        onValueChange = { password = it },
        label = { Text(text = stringResource(id = R.string.prompt_password)) },
        modifier = Modifier
            .fillMaxWidth(),
        visualTransformation = PasswordVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
    )
}

Here I default my password to "admin", which is five characters long. It shows five asterisks.

lol

But if a user presses the enter key there, the password field becomes six characters long.

more lol

Questions:

  1. Why does it do that?
  2. How can it be modified to not do that?
Brian
  • 7,394
  • 3
  • 25
  • 46

1 Answers1

1

I'm going to answer my question. It needs singleLine = true, which the docs did not mention.

Fixed code:

@Composable
fun PasswordInput() {
    var password by rememberSaveable { mutableStateOf("") }

    TextField(
        value = password,
        onValueChange = { password = it },
        maxLines = 1,
        singleLine = true,
        label = { Text(text = stringResource(id = R.string.prompt_password)) },
        modifier = Modifier
            .fillMaxWidth(),
        visualTransformation = PasswordVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
    )
}

Source

Brian
  • 7,394
  • 3
  • 25
  • 46