I'm trying to make a custom TextField where the text gets deleted when the right icon is pressed. The problem with the following code is that the textFieldValue.text is a val, so it can't be reassigned.
So far the only solution I have found is to recompose the entire TextField sending "" as the text. Is there a better way to achieve this?
var textFieldValue by rememberSaveable(stateSaver = TextFieldValue.Saver)
{ mutableStateOf(TextFieldValue("")) }
MyTextField(
text = textFieldValue,
onValueChange = {
textFieldValue = it
},
leftIconClickable = { /*Do nothing*/ },
rightIconClickable = { textFieldValue.text = "" }
)
(At this point this textField has almost the same code as the TextField of Jetpack Compose, the main difference being that it also receives 2 clickables for the icons)
Have your tried performing a copy()?
rightIconClickable = { textFieldValue = textFieldValue.copy(text = "") }
Here's a sample of a TextField using TextFieldValue with a simple Button where I copy() the current TextFieldValue instance, re-assigning it to the same variable, and it clears the TextField.
var textFieldValue by rememberSaveable(stateSaver = TextFieldValue.Saver) {
mutableStateOf(TextFieldValue(""))
}
Column {
TextField(
value = textFieldValue,
onValueChange = {
textFieldValue = it
}
)
Button(onClick = {
textFieldValue = textFieldValue.copy(text = "")}) {
}
}
Related
I want to execute some code when the value of BasicTextfield changes in Jetpack Compose.
Everything works fine in 2 conditions:
for any value change.
if all the textfield value is cleared using the device keyboard
But,
When I try to change the state value to empty text on click of a button, using this code :
textfieldstate.value = TextFIeldValue("")
onValueChange is not triggered.
Although if I set it to any other value, onValueChange is triggered.
textfieldstate.value = TextFIeldValue("FOO")
Code of Button/Icon click:
Icon(modifier = Modifier.clickable {
textfieldstate.value = TextFieldValue("")
}) {.....}
Is there a way to trigger onValueChange of BasicTextField when value of the field is cleared from an external button click event??
If you want to do it all at once as is more recommended, I would do this:
#Composable
fun AppContent(
viewModel: MyViewModel
) {
val state by viewModel.uiState.collectAsState()
MyPanel(
state = MyViewModel,
onValueChange = viewModel::onValueChange,
onClickButton = viewModel::onClickButton
)
}
#Composable
fun MyPanel(
state: MyTextFieldState,
onValueChange: (String) -> Unit,
onClickButton: () -> Unit
) {
TextField(
value = state.text,
onValueChange = onValueChange(it)
)
Button(
onClick = { onClickButton() }
) {
...
}
}
class MyViewModel: ViewModel() {
private val _uiState = MutableStateFlow(MyUiState())
val uiState = _uiState.asStateFlow()
fun onValueChange(str: String) {
_uiState.value = _uiState.value.copy(text = str)
}
fun onClickButton() {
_uiState.value = _uiState.value.copy(text = "")
}
}
data class MyUiState(
val text: String = ""
)
The code above mainly elevates the state of the TextField, processes all things in the viewModel, and wraps a layer of UI state with a data class. If there are other requirements, you can also add different parameters, for example, if there is an error in the TextField, it can be written as:
data class MyUiState(
val text: String = "",
val isTextError: Boolean = false
)
The onValueChange callback is useful to be informed about the latest state of the text input by users.
If you want to trigger some action when the state of (textFieldValue) changes, you can use a side effect like LaunchedEffect.
Something like:
var textFieldValue by remember() {
mutableStateOf(TextFieldValue("test" ))
}
LaunchedEffect(textFieldValue) {
//doSomething()
}
BasicTextField(
value = textFieldValue,
onValueChange = {
textFieldValue = it
}
)
OutlinedButton(
onClick = { textFieldValue = textFieldValue.copy("") }
) {
Text(text = "Button")
}
Traditional EditText on Android supports android:selectAllOnFocus attribute, which causes its content to be selected when user, for example, clicks on the EditText.
How can this behavior be achieved when using androidx.compose.material.TextField in Jetpack Compose?
You can collect the focus state from MutableInteractionSource and change the selection state depending on it:
var textFieldValue by remember { mutableStateOf(TextFieldValue("Lorem ipsum")) }
val interactionSource = remember { MutableInteractionSource() }
val isFocused by interactionSource.collectIsFocusedAsState()
LaunchedEffect(isFocused) {
textFieldValue = textFieldValue.copy(
selection = if (isFocused) {
TextRange(
start = 0,
end = textFieldValue.text.length
)
} else {
TextRange.Zero,
}
)
}
TextField(
value = textFieldValue,
onValueChange = { textFieldValue = it },
interactionSource = interactionSource,
)
I have a Button composable that I need to get the text value when clicked.
Button(
onClick = {// Get the "TheText" from below },
) {
Text(
modifier = Modifier.padding(8.dp),
text = "TheText",
style = TextStyle(fontSize = 15.sp)
)
}
I am creating a type of quiz where the buttons text matches the correct answer.
I thin I may need to create a custom compposabe that takes the text as a parameter and also a callback function that will pass that text back up to my main program where I can Check for a correct answer.
I assume you want to input text instead of just displaying one.
#Composable
fun example() {
var text by remember { mutableStateOf("TheText") }
Column {
Button(
onClick = {
val useThisString = text
},
) { Text(text = text) } // Probably wanna put "Copy" here
TextField(
value = text,
onValueChange = { text = it },
label = { Text("Optinal Label") }
)
}
}
Otherwise, if you just want the label of the button:
val buttonText = "TheText"
Button(
onClick = {
// Use variable here
},
) {
Text(
modifier = Modifier.padding(8.dp),
text = buttonText,
style = TextStyle(fontSize = 15.sp)
)
}
Ok here's how to store it in a variable
var retrievedValue by mutableStateOf("") //Assuming you must use it somewhere else as state
var currentValue by rememberSaveable { mutableStateOf("The Text") }
Button(
onClick = { retrievedValue = currentValue },
) {
Text(
modifier = Modifier.padding(8.dp),
text = currentValue,
style = TextStyle(fontSize = 15.sp)
)
}
Now you can use it anywhere you want. Changing the retrievedValue would trigger recompositions in any composable that reads it.
This should solve your problem. Use the retrievedValue as the value returned by a callback. In compose, for such stuff, you do not need callbacks. MutableState objects, whenever are modified, trigger a recomposition on the composables reading them.
Anyway, here when you click the button, you will get the value of the text, whatever it may be, you will always get the current value.
For some reason, CoreTextField works but TextField and OutlineTextField wont
Works
#Composable
fun TextFieldDemo(){
val text = remember { mutableStateOf(TextFieldValue("Text")) }
CoreTextField(modifier = Modifier.fillMaxWidth(),
value = text.value,
onValueChange = {text.value = it})
}
Not working
#Composable
fun TextFieldDemo(){
val text = remember { mutableStateOf(TextFieldValue("Text")) }
OutlinedTextField(value = text.value,
onValueChange = {text.value = it}, label = {Text("Test")})
}
Error: Non of the following Functions can be called for OutlinedTextField
From the docs change
Bug Fixes
androidx.ui.foundation.TextFieldValue and androidx.ui.input.EditorValue are deprecated. TextField, FilledTextField and CoreTextField composables that uses that type is also deprecated. Please use androidx.ui.input.TextFieldValue instead (I4066d, b/155211005)
But I'm using what it says (I think)
Edit
You are missing the "label" param in the original question, as we can see in the image. Following Gabriele's comment made it work, so you shouldn't change the question with the answer, it's a lot confusing.
Just for the record, here it`s the code that works in 1.0.0-alpha02:
#Composable
fun TextFieldDemo() {
val text = remember { mutableStateOf(TextFieldValue("Text")) }
OutlinedTextField(value = text.value,
onValueChange = { text.value = it },
label = { Text("Test") })
}
I'd like to have a TextField bound to a MutableStateFlow that comes from a view model. This is how I set it up:
#Composable
fun MyTextField(textFlow: MutableStateFlow<String>) {
val state = textFlow.collectAsState(initial = "")
TextField(
value = TextFieldValue(state.value),
onValueChange = { textFlow.value = it.text },
label = { Text(text = "Label") }
)
}
When I type something into the text field, it behaves really strangely. For example, if I type 'asd', it ends up with 'asdasa'. How can I update textFlow.value without messing up with the text field?
This error is caused by the usage of TextFieldValue with Flow.
To fix this, set the value of the TextField to just state.value and then on text change set the value with textFlow.value = it.
#Composable
fun MyTextField(textFlow: MutableStateFlow<String>) {
val state = textFlow.collectAsState(initial = "")
TextField(
value = state.value,
onValueChange = { textFlow.value = it },
label = { Text(text = "Label") }
)
}