Is there a way to disable all interaction for Jetpack Compose's TextField?
-
It's a known feature request currently: issuetracker.google.com/issues/166478534Saurabh Thorat– Saurabh Thorat2020-12-09 14:31:11 +00:00Commented Dec 9, 2020 at 14:31
-
this could help: stackoverflow.com/a/65699135/8362967LEGEND MORTAL– LEGEND MORTAL2021-04-05 22:54:22 +00:00Commented Apr 5, 2021 at 22:54
Add a comment
|
3 Answers
You can use the enabled attribute:
enabled : controls the enabled state of the TextField. 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
Something like:
var text by rememberSaveable { mutableStateOf("Text") }
TextField(
value = text,
onValueChange = { text = it },
enabled = false,
label = { Text("Label") },
singleLine = true
)
answered Mar 21, 2021 at 8:09
Gabriele Mariotti
370k114 gold badges1k silver badges936 bronze badges
3 Comments
gaohomway
enabled will not act on disabledTextColor, is there a way to solve it?
tasjapr
Do you know some way to make TextField editable and focusable but not selectable?
simpleuser
To make text non-selectable, wrap the components within
DisableSelection { ... }My project is on alpha08 atm. Hopefully they add some built in way of doing this soon but in the meantime I've been doing this:
val textState = remember { mutableStateOf(TextFieldValue()) }
val disabled = remember { mutableStateOf(true) }
Box {
TextField(value = textState.value, onValueChange = {
textState.value = it
})
if (disabled.value) {
// Set alpha(0f) to hide click animation
Box(modifier = Modifier.matchParentSize().alpha(0f).clickable(onClick = {}))
}
}
So yeah, drawing an invisible clickable Box that's the same size over the TextField. You can resize the TextField to whatever you'd want, calling .matchParentSize() on the invisible Box will make it match the TextField due to them being the only children in the parent Box.
You can toggle the disabled state by setting disabled.value = true/false wherever is appropriate.
Comments
readOnly attribute can also work in case if you want focusable & selectable text field but not editable.
Like this:
var value by remember { mutableStateOf("Hello World!") }
TextField(
value = value,
onValueChange = { value = it },
readOnly = true,
)
1 Comment
Rahul
readOnly = true, hides the caret and this is not desirable.