When the button is deactivated, a touch event is delivered to the lower level's Composable function. [183908811]

Fixed

Bug

Status Update

No update yet.

Description

pl...@gmail.com

created issue #1

Mar 29, 2021 05:08PM

Jetpack Compose release version: 1.4.30 Android Studio Build: Android Studio Arctic Fox | 2020.3.1 Canary 12

Steps to Reproduce:

Define Click on Box and inner button
Apply Disabled to button
(Bug?!?! )When clicking the button, the box click operates

The button click does not work, but I don't know if it is correct to propagate to the lower box. If it is an existing ViewGroup, it will not be propagated to the lower part.

@Composable
fun SampleBox() {
    var text by remember { mutableStateOf("Test") }
    Box(
        modifier = Modifier
            .aspectRatio(1f)
            .background(Color.Blue)
            .clickable { text = "Box" }
            .padding(10.dp)
    ) {
        Button(
            modifier = Modifier
                .size(100.dp)
                .align(Alignment.TopCenter),
            colors = ButtonDefaults.buttonColors(Color.Red),
            onClick = { text = "Red" }
        ) { }

        Text(
            text = text,
            fontSize = 40.sp,
            color = Color.White,
            modifier = Modifier.align(Alignment.Center)
        )

        Button(
            modifier = Modifier
                .size(100.dp)
                .align(Alignment.BottomCenter),
            colors = ButtonDefaults.buttonColors(Color.Green),
            enabled = false,
            onClick = { text = "Green" }
        ) { }
    }
}

sample.mov

474 KB

Download

Comments

po...@google.com <po...@google.com> Jun 11, 2021 02:34PM

Assigned to ma...@google.com.

ap...@google.com <ap...@google.com> #2Jun 16, 2021 09:23AM

Marked as fixed.

Project: platform/frameworks/support
Branch: androidx-main

commit f47b8cb1150e74b96db8c3d54c77d2db04d53197
Author: Matvei Malkov <malkov@google.com>
Date: Tue Jun 15 13:51:28 2021

Do not propogate clicks down when Modifier.clickable(enabled=false). Same for toggleable and selectable.

Right now clickable(enabled=false) behaves like there's no clickable at all. This is not correct, as the disabled meaning is not the meaning of absence. We need to consume clicks and don't propogate it up the hierarchy, e.g. Card that cointans disabled button shoudln't be clickable when user touches button. This will be also on par with Android views behaviour.

Fixes: 183908811
Relnote: Disabled Button, Card, Checkboxes and overall Modifier.clickable(enabled=false) will blocks clicks from going up to the parent.
Test: added new
Change-Id: Ic2c3b17121c3ab4676a995c4a83d15bac6c16aaa

M compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/ClickableTest.kt
M compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/SelectableTest.kt
M compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/ToggleableTest.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/Clickable.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/selection/Toggleable.kt

https://android-review.googlesource.com/1736997

ma...@google.com <ma...@google.com> #3Jun 16, 2021 10:12AM

Thanks a lot for filing this issue. It was a serious misconception in Modifier.clickable and its users that we were able to fix before hitting stable thanks to you!

[Deleted User] <[Deleted User]> #4Jul 13, 2021 05:02PM

Ok. But if i need to disable buttons click, and still handle box clicks? Now this fix comletely destroys this ability

ma...@google.com <ma...@google.com> #5Jul 13, 2021 05:32PM

Could you share a usecase when it is desirable to proxy click action to the parent card/box?

If the button is disabled - it's unavailable and nothing should happen when the user presses it.

[Deleted User] <[Deleted User]> #6Jul 16, 2021 07:23AM

I have a custom layout. When it in the collapsed state - the parent should be clickable. Click on parrent should expand children. In this state children are clickable. Click on child item opens new screen, click on knob collapses the layout.

In previeous realization i had for children:

MoodCardStack(
                    date = date,
                    state = state,
                    itemPadding = Dimens.standard,
                    modifier = Modifier.padding(vertical = Dimens.small)
                ) {
                    if (moods[date]?.size == 1 && state.expanded) {
                        state.collapse()
                    }
                    moods[date]?.forEach { mood ->
                        key(mood) {
                            MoodCardItem(
                                userMood = mood,
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .height(90.dp)
                                    .clickable(
                                        enabled = state.expanded || moods[date]?.size == 1,
                                        indication = null,
                                        interactionSource = remember { MutableInteractionSource() }
                                    ) {
                                        onMoodClick(mood.id)
                                    }
                            )
                        }
                    }
                }

and for parent

 Layout(
            content = content,
            modifier = Modifier
                .clickable(
                    enabled = state.expanded.not() && collapseProgress.value == 0F,
                    indication = null,
                    interactionSource = remember { MutableInteractionSource() }
                ) { state.expand() }
                .constrainAs(container) {
                    top.linkTo(parent.top)
                    start.linkTo(dateColumn.end, margin = Dimens.small)
                    end.linkTo(parent.end, margin = Dimens.standard)
                    width = Dimension.fillToConstraints
                }
        ) { measurables, constraints ->
```

Now if MoodCardItem .clickable(false), the whole layout is not clickable. I had to dynamically create different modifiers with and without clickables. And this realization looks weird when the previous was more obvious.

layout.mp4

2.6 MB

Download

ma...@google.com <ma...@google.com> #7Jul 19, 2021 09:50AM

It seems like the card shouldn't be clickable at all when the layout is collapsed.

disabled clickable shouldn't allow other click gestures to go through, as it would be unpredictable for users and developers. Basically, the list goes:

Modifier.clickable(enabled = true) == I can react to the click gestures and the action is available now
Modifier.clickable(enabled = false) == I can react to the click gestures, and the action is currently unavailable
no clickable modifier == I cannot react to the click gestures, so anyone else up the hierarchy can handle it for me.

I hope that helps.