The M3 (and I think M2 as well, but I haven't chec...

# compose

[Andrew Hughes]

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

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. Is there a recommended way to synchronize these components?

[Chris Sinco [G]]

I think the M3 component itself should encapsulate this synchronization since the animations are part of the opinionated design of the component. I think I’d file a bug on this so the Material team can fix this in the component. cc @Nick Rout

[Andrew Hughes]

Okay, thanks! I've filed a bug: https://issuetracker.google.com/issues/230776597