How to make TextField unclickable/unfocusable?

Question

I have a simple OutlinedTextField with a label and text. By the design, it should not be focused and/or typeable. On the click event, the app should open a "picker" dialog and on a pick, the value of TextField should be updated.

So, as a result, the TextField, shouldn't:

• be focusable
• open keyboard
• accept text insertion or input It should:
• be clickable

As a backup option, I tried to make a simple Text look like an OutlinedTextField I think it is more difficult to make it look the same as OutlinedTextField.

Any suggestions?

Answer 1

Add enabled = false to the OutlinedTextField

When false, the text field will be neither editable nor focusable, the input of the text field will not be selectable, visually text field will appear in the disabled UI state

OutlinedTextField(
    value = text,
    onValueChange = {
        text = it
    },
    enabled = false
)

If you want to set custom colors for the disabled state just add:

    colors =  TextFieldDefaults.outlinedTextFieldColors(
        disabledTextColor = LocalContentColor.current.copy(LocalContentAlpha.current),
        disabledBorderColor =  MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled),
        disabledLabelColor = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium)
    )