0

I have made a composable function for TextInput....But in this Unable to see cursor at Initial state and also when I set KeyboardType.Password the password option doesn't appear I appear as normal text only I am not able to rectify the issue where I am doing wrong...Well also I am new to jetpack compose

Common Function made


@Composable
fun TextInput(
    label: String,
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    keyboardType: KeyboardType
) {
    BasicTextField(
        value = value,
        onValueChange = onValueChange,
        modifier = Modifier
            .fillMaxWidth()
            .padding(
                start = ZingSalesAppTheme.dimensions.dimen_10dp,
                top = ZingSalesAppTheme.dimensions.dimen_10dp,
                end = ZingSalesAppTheme.dimensions.dimen_10dp
            )
            .padding(
                start = ZingSalesAppTheme.dimensions.dimen_10dp,
                end = ZingSalesAppTheme.dimensions.dimen_10dp
            ),

        textStyle = TextStyle(
            color = Color.Black,
            textAlign = TextAlign.Start
        ),
        singleLine = true,
        cursorBrush = SolidColor(Color.Black),
        keyboardOptions = KeyboardOptions(keyboardType = keyboardType),
        decorationBox = { innerTextFeild ->
            Column {
                if (value.text.isEmpty()) {
                    Text(
                        text = label,
                        style = ZingSalesAppTheme.typography.body1_medium.merge(
                            TextStyle(textAlign = TextAlign.Start).copy(
                                color = ZingSalesAppTheme.colors.neutral[Colors.TYPE_600.ordinal]
                            )
                        ),
                        modifier = Modifier
                            .fillMaxWidth()
                    )
                } else {
                    innerTextFeild()


                }
                Divider(
                    modifier = Modifier.padding(top = 8.dp),
                    color = ZingSalesAppTheme.colors.neutral[Colors.TYPE_600.ordinal]
                )


            }

        }


    )
}

Usage of the function

  TextInput(
                "Enter Password",
                passwordState.value,
                onValueChange = { passwordState.value = it },
                KeyboardType.Password
            )

I already have check all the state but couldn't find the approach

Tanishq Chawda
  • 192
  • 3
  • 13

1 Answers1

1

You need add visualTranformation, like this:

BasicTextField(...
  keyboardOptions = KeyboardOptions(keyboardType = keyboardType),
  visualTransformation = if (showPassword.value) VisualTransformation.None else PasswordVisualTransformation()
...)

If you don't want to change between show and hide password, just need add this code:

visualTransformation = PasswordVisualTransformation()
Gustavo Stelle Cunha
  • 46
  • 3