Long click action for chips

[Fra078]

It's a common task to make a chip that when long clicked do a secondary action so why not introduce a onLongClick parameter for material Chips which implicitly use the combined clickable modifier.

[yschimke]

Are you interested in submitting a PR?

[Fra078]

What is?

[yschimke]

It's a good feature request. I'm just checking if you are asking for it to be implemented, or if you are interested in contributing it by submitting a PR.

[Fra078]

I just wanted to recommend a feature, unfortunately I don't have enough time to contribute

[MohitMandalia]

@yschimke Do we also want to inclide onDoubleClick??

Just to be clear we will now use combinedClickable for all of these

[luizgrp]

hey @Kpeved, do you have any thoughts on what would the best approach to implement this?

[Kpeved]

Checking whether it's possible to have a workaround for a current implementation. If not - we might consider a new api for Chips. ( in M3 and possibly in M2.5)
I think the same problem might exist for other components - such as Button

[Kpeved]

To summarize my findings - it's not possible to add now another clickable outside of the component ( eg extend Chip or Button externally and add other callbacks like LongClick) - for that we have to rewrite the component itself ( by using combinedClickable or other modifiers) .
This not only applies to Wear Compose and Horologist, but to the core Compose components (phone/desktop) as well.

The only way to achieve this now will be to copy existing implementations and rewrite clickable handling there

[yschimke]

Do we want to add those copies here to support LongClick? Or could this be added in Wear Compose without changing the API, just modifiers? I'm assuming not.

[Kpeved]

Theoretically we can add them in Wear Compose, but that's not a quick solution.

[yschimke]

@Kpeved would this be possible by wrapping the Wear Compose button with a simple Box, that has the clickable, but sharing the interactionSource?

If so, we could put that in Horologist and supporting the combinedClickable properties as params.

[IsakTheHacker]

@yschimke I implemented your idea, but instead of wrapping the Wear Compose button with a Box, I did the exact opposite. Here is my final solution:

@OptIn(ExperimentalFoundationApi::class)
@Composable
internal fun MultiClickButton(
	onClick: () -> Unit,
	modifier: Modifier = Modifier,
	onLongClick: (() -> Unit)? = null,
	onDoubleClick: (() -> Unit)? = null,
	enabled: Boolean = true,
	colors: ButtonColors = ButtonDefaults.primaryButtonColors(),
	interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
	shape: Shape = CircleShape,
	border: ButtonBorder = ButtonDefaults.buttonBorder(),
	content: @Composable BoxScope.() -> Unit,
) {
	Button(
		onClick = {},
		enabled = enabled,
		colors = colors,
		interactionSource = interactionSource,
		shape = shape,
		border = border,
	) {
		Box(
			modifier = modifier
				.combinedClickable(
					interactionSource = interactionSource,
					indication = null,		//We already get the visual indication by using the standard Material Button
					enabled = enabled,
					onClick = onClick,
					onLongClick = onLongClick,
					onDoubleClick = onDoubleClick,
				),
			contentAlignment = Alignment.Center,
			content = content,
		)
	}
}

I also tried having the Box be the outer composable and the Button as content in the BoxScope, but that resulted in the same behaviour I described in #1979. Maybe something similar to this solution could be added in Horologist?

[yschimke]

Nice

Is the touch target of the box the same size as
the button.

[IsakTheHacker]

Yes, it only receives touch inputs that are within the circle covered by the button

[Kpeved]

Thanks for proposal @IsakTheHacker. That's great suggestion, it works!

But be aware that it handles clicks only for a section which your content takes. For Button it's ok, because we don't have any paddings in it. But we have inner paddings in some components - like Chip or Card. So you have to override it internally - removing it from Chip or Card, and adding it to the inner Box .
Something like this

... 
    Chip(
        onClick = {},
        contentPadding = PaddingValues(0.dp),
        enabled = enabled,
        interactionSource = interactionSource,
        shape = shape,
    ) {
        Box(
            modifier = modifier
                .fillMaxSize()
                .combinedClickable(
                    interactionSource = interactionSource,
                    indication = null,        //We already get the visual indication by using the standard Material Button
                    enabled = enabled,
                    onClick = onClick,
                    onLongClick = onLongClick,
                    onDoubleClick = onDoubleClick,
                )
                .padding(ChipDefaults.ContentPadding) // padding should go after specified clickable

A real bummer is that in androidx.compose Chip has a hardcoded padding, which can't be overriden :/ . But in wear components we have this option :)

[yschimke]

There is some fillMaxSize when we try with Chip, but an example with Button and Card #2021 (review)

[yschimke]

Fixed

[yschimke]

I think we will remove doubleClick, just leaving the additional longClick. Mainly for unclear a11y reasons.