How do I make a disabled compose OutlinedTextField look like its enabled?

Question

I have a compose OutlinedTextField which shouldn't be manually editable but filled using input from something that happens on clicking the text field. But setting the field as readOnly=true makes the clickable modifier not work. So a workaround I found is to set it as enabled=false which lets clickable work.

OutlinedTextField(
    value = text,
    onValueChange = { text = it},
    enabled = false,
    modifier = Modifier.clickable { text= "Clicked"}
)

How can I make this look as if its enabled based on whatever theme is being followed without setting a fixed color?

Answer 1

You can use the TextFieldDefaults.outlinedTextFieldColors applying in the disabled colors the same value of the enabled colors without using hardcoded values:

OutlinedTextField(
    //...
    enabled = false,
    colors = TextFieldDefaults.outlinedTextFieldColors(
        disabledTextColor = LocalContentColor.current.copy(LocalContentAlpha.current),
        backgroundColor = Color.Transparent,
        disabledBorderColor = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled),
        disabledLabelColor = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
    )
)