https://kotlinlang.org logo
#compose
Title
# compose
a

Andrew Hughes

04/27/2022, 10:04 PM
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:
Copy code
@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?
c

Chris Sinco [G]

04/27/2022, 10:46 PM
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
a

Andrew Hughes

04/28/2022, 8:30 PM
Okay, thanks! I've filed a bug: https://issuetracker.google.com/issues/230776597
🙏 1
2 Views