Home > Enterprise >  Jetpeck Compose hide cursor in OutlinedTextField
Jetpeck Compose hide cursor in OutlinedTextField

Time:07-14

How can the cursor in an OutlinedTextField be hidden? I tried the following, but it doesn't seem to work. My input needs a border, so I don't think I can use another component than OutlinedTextField.

OutlinedTextField(
    value = "",
    onValueChange = {},
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    singleLine = true,
    maxLines = 1,
    shape = inputCornerShape,
    colors = TextFieldDefaults.outlinedTextFieldColors(
        focusedBorderColor = Color(0xFF6650a4),
        unfocusedBorderColor = Color(0xFF625b71),
        cursorColor = Color.Transparent,
        errorCursorColor = Color.Transparent
    ),
    modifier = Modifier
        .fillMaxWidth()
        .weight(1f)
        .wrapContentHeight()
        .indicatorLine(
        enabled = false,
        isError = false,
        interactionSource = interactionSource,
        colors = TextFieldDefaults.textFieldColors(
            disabledIndicatorColor = Color.Transparent,
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            errorIndicatorColor = Color.Transparent,
            cursorColor = Color.Transparent,
            errorCursorColor = Color.Transparent
        ),
        focusedIndicatorLineThickness = 0.dp,
        unfocusedIndicatorLineThickness = 0.dp
    )
)

CodePudding user response:

You can hide the cursor using cursorColor = Color.Transparent in the colors attribute. You should also apply the same color to the text selection applying a custom TextSelectionColors:

val customTextSelectionColors = TextSelectionColors(
    handleColor = Color.Transparent,
    backgroundColor = Color.Transparent
)

CompositionLocalProvider(LocalTextSelectionColors provides customTextSelectionColors) {
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        singleLine = true,
        maxLines = 1,
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = Color(0xFF6650a4),
            unfocusedBorderColor = Color(0xFF625b71),
            cursorColor = Color.Transparent,
            errorCursorColor = Color.Transparent
        ),
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
    )
}

enter image description here

CodePudding user response:

Alright, so I found out that apparently settings the cursor color only didn't work when I set it from a parameter (like in my question). As soon as I copied the default value of the parameter and pasted it as the value of color it started working. That's when I realised I didn't include cursorColor and errorCursorColor when instantiating my Composable. I added other colors there, but not these ones. I thought they would be added, but instead, the entire TextFieldColors object is overwritten (obviously). When I added cursorColor and errorCursorColor here too, it started working. Derp.

  • Related