IssueTracker

Jetpack Compose version: 2022.11.00,

Jetpack Compose component used: FilterChip

Android Studio Build: 2022.2.1 Canary 9

Kotlin version: 1.7.20

Steps to Reproduce or Code Sample to Reproduce:

1. The documentation at https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#FilterChip(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SelectableChipColors,androidx.compose.material3.SelectableChipElevation,androidx.compose.material3.SelectableChipBorder,androidx.compose.foundation.interaction.MutableInteractionSource) states:

"enabled: Boolean = true

controls the enabled state of this chip. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services."

2. But enabled isn't passed into the underlying Surface, so clicks are still propagated :(
3. This is what we can see in the current source-code, with a comment on how it might be fixed

@ExperimentalMaterialApi
@Composable
fun FilterChip(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    border: BorderStroke? = null,
    colors: SelectableChipColors = ChipDefaults.filterChipColors(),
    leadingIcon: @Composable (() -> Unit)? = null,
    selectedIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    content: @Composable RowScope.() -> Unit
) {
    // TODO(b/113855296): Animate transition between unselected and selected
    val contentColor = colors.contentColor(enabled, selected)
    Surface(
        selected = selected,
        onClick = onClick,
// !!! Here should also be: enabled = enabled,
        modifier = modifier.semantics { role = Role.Checkbox },
        shape = shape,
        color = colors.backgroundColor(enabled, selected).value,
        contentColor = contentColor.value.copy(1.0f),
        interactionSource = interactionSource,
        border = border,
    ) {

Stack trace (if applicable):