Canvas click events are not working once we wrap t...

# compose

[Kshitij Patil]

Canvas click events are not working once we wrap them inside a Composable

Box(Modifier.fillMaxSize()) {
    Canvas(Modifier.clickable { Log.i(TAG, "Clicked") }) {
        drawCircle(Color.Red, 25f, Offset(150f,150f))
    }
}

I want only the portion of Circle clickable, I tried clipping the Canvas, didn't help. Canvas click events only work within Surface , that too, on the entire Canvas area.

[romainguy]

clickable() can’t know what shape you want to restrict the click to

[romainguy]

(we could do it when there’s clipping I suppose but that could also lead to surprising behaviors)

[romainguy]

You probably need a custom input handler

[romainguy]

That said, not sure why clicks wouldn’t work inside a Box but would inside a Surface. @Adam Powell?

[Kshitij Patil]

I agree with that: clickable won't know the shape beforehand. I remember we used to do write custom views and was able to handle click/touch/gesture events by implementing respective listeners. Should I create a custom layout instead to do the same using Jetpack Compose? I didn't get what you mean by custom input handler and how should I implement the same in Compose.

[Adam Powell]

clickable should size the clickable region to the size of the element it modifies. It should be equivalent here to do Canvas(Modifier.fillMaxSize().clickable...)

[Adam Powell]

as for Surface, cc @matvei for specific behavior differences there

[Kshitij Patil]

I'm sorry for the confusion ☹️, I just realized it's not the issue with Box vs Surface, but it's about fillMaxSize() modifier on the Canvas.

Canvas is not clickable unless it is preceded by the fillMaxSize modifier. wrapContentSize doesn't make any difference, so it seems like a compulsory step for the Canvas to have fillMaxSize() modifier to be a clickable

[Andrey Kulikov]

not exactly fillMaxSize(), but any layout modifier. you can set some fixed size with `Modifier.size(48.dp)`In your case you had clickable area with 0x0 size

[Andrey Kulikov]

difference between Box and Surface is that Box looses constraints for its children. If Box is asked to fill the whole size it doesn't mean the children of Box are also forced to do so. Surface is currently not doing the same thing, but will in the future

[Kshitij Patil]

Okay, got it. Thanks!