IssueTracker

Jetpack Compose version: 1.0.0-alpha09 Jetpack Compose component used: androidx.compose.material3:material3 Android Studio Build: N/A Kotlin version: N/A

The M3 (and I think M2 as well, but I haven't checked) TextField and OutlinedTextField both appear to animate changes (such as color) when transitioning to and from the isError state. When including an error message below a TextField, there doesn't appear to be a way to synchronize the appearance of the error message with the internal animations of the TextField. For example, take the following sample from the official M3 compose samples:

@Sampled
@Composable
fun TextFieldWithErrorState() {
    val errorMessage = "Email format is invalid"
    var text by rememberSaveable { mutableStateOf("") }
    var isError by rememberSaveable { mutableStateOf(false) }

    fun validate(text: String) {
        isError = !text.contains('@')
    }

    Column {
        TextField(
            value = text,
            onValueChange = {
                text = it
                isError = false
            },
            singleLine = true,
            label = { Text(if (isError) "Email*" else "Email") },
            isError = isError,
            keyboardActions = KeyboardActions { validate(text) },
            modifier = Modifier.semantics {
                // Provide localized description of the error
                if (isError) error(errorMessage)
            }
        )
        // Supporting text for error message.
        Text(
            text = errorMessage,
            color = MaterialTheme.colorScheme.error,
            style = MaterialTheme.typography.bodySmall,
            modifier = Modifier.padding(start = 16.dp, top = 4.dp).alpha(if (isError) 1f else 0f)
        )
    }
}

When entering and exiting the error state, the error message becomes immediately visible/invisible while the TextField animates the state change. This causes visual discontinuity between the components.

I see that internally the animations are using a 150ms tween animation, but there's no way to reference this directly since it's marked as internal.