I’m trying to create simple login view which has a ViewModel and SateUI with jetpack compose.

I reach this Screen from the navigation graph startdestiation “LoginScreen”. This, to clarify that the MainActivity just holds the reference to the Navigation and it does the Navigation from the navhost it self.

The ViewModel:

private val _uiState = MutableStateFlow(LoginStateUI())
val uiState: StateFlow<LoginStateUI> = _uiState.asStateFlow()

fun updateState (value:String,prop:String){
    _uiState.update {
        when(prop){
            "email" -> it.user.email = value
            "password" -> it.user.password = value
        }
        it
    }
}

The Screen (Parts):

val viewModel = viewModel(modelClass = LoginViewModel::class.java)
val uiState by viewModel.uiState.collectAsState()
Column() {
   OutlinedTextField(value = uiState.user.email, onValueChange = {
            (viewModel::updateState)(it, "email")
        }, placeholder = {
            Text(stringResource(id = R.string.userLabel))
        }
    )
   ...
   OutlinedTextField(value = uiState.user.password, onValueChange ={
        viewModel.updateState(it, "password")
        },placeholder= {
            Text(stringResource(id = R.string.passwordLabel))
        },
        visualTransformation = PasswordVisualTransformation()
    )
  ...
}

But the issue is that, when ever I try to make an input, the behavior I see is, that the first input gets correct:

but immediately there is a second incoming change trigger with a string empty on it:

I’m not sure what else I might be doing wrong. 🙁

I’m debugging in Pixer 8 Pro, Aiming at Android 28