Compose: beta08 breaks clickable

Question

I have a composable with an expandable Card view.

@Composable
fun ItemCard() {
    var isExpanded by remember { mutableStateOf(false) }
    Card(modifier = Modifier.clickable {
            isExpanded = !isExpanded
            Log.d(TAG, "Expanded set to $isExpanded")
        }) {
            // regular card segment goes here
            AnimatedVisibility (isExpanded) {
               // expanded card segment goes here
            }
    }
}

So, I updated compose to 1.0.0-beta08 and Modifier.clickable stoped working.

Here are the dependencies:

implementation 'androidx.core:core-ktx:1.5.0'
implementation 'androidx.appcompat:appcompat:1.3.0'
implementation 'com.google.android.material:material:1.3.0'
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling:$compose_version"
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
implementation 'androidx.activity:activity-compose:1.3.0-alpha08'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
implementation "androidx.navigation:navigation-compose:2.4.0-alpha01"
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha07"
implementation 'androidx.room:room-common:2.3.0'
implementation 'androidx.room:room-ktx:2.3.0'
implementation "androidx.room:room-runtime:2.3.0"
kapt "androidx.room:room-compiler:2.3.0"
implementation "androidx.compose.runtime:runtime-livedata:$compose_version"
implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.3.1"
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.4.32"
api "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.9"
api "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.9"
coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:1.1.5")

All I changed was changing compose from 1.0.0-beta07 to 1.0.0-beta08 and (as required by the compose update) changing classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.32" to classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.10"

Om Kumar · Accepted Answer · 2021-06-12T03:47:19.777

Cause:

This is a Behaviour Breaking API change from 1.0.0-beta07 to 1.0.0-beta08 as mentioned in release notes for Jetpack Compose.

Jetpack compose Version 1.0.0-beta08 Behavior Breaking API Change

BEHAVIOUR-BREAKING: Card now consumes clicks, making clicks added via Card(Modifier.clickable) to be a no-op. Please, use new experimental overload of a Card that accepts onClick. (Ia8744, b/183775620)

Solution:

The solution provided is an overload of Card which allows handling clicks alongside related properties like indication, interactionSource, enabled/disabled.

Added a new Card overload that handles clicks as well as other clickable functionality: indication, interactionSource, enabled/disabled. It wasn't possible to use a regular non-clickable Card with the Modifier.clickable because the Card will not clip the ripple indication in those cases.

Card overload:

Here is the new Card overload which exposes onClick as well as interactionSource and indication.

@Composable 
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    border: BorderStroke? = null,
    elevation: Dp = 1.dp,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    indication: Indication? = LocalIndication.current,
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    content: @Composable () -> Unit
)

Compose: beta08 breaks clickable

1 Answers1