onValueChange of BasicTextField is not triggered on setting value to TextFieldValue("") in Jetpack Compose

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
   )
   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")
}