Unable to have interaction in Compose Preview Doe...

# compose

[miqbaldc]

Unable to have interaction in Compose Preview

Does it not possible to use list ADT e.g: HashSet as remember { mutableStateOf(hashSetOf()) }

See video & snippet code in 🧵

[miqbaldc]

@Preview
@Composable
fun FilterChipGroupPreview() {
    // data from network
    val items = listOf("Abc", "Def", "Ghi")
    // hoist this inside activity / fragment
    val itemsSelected = remember { mutableStateOf(hashSetOf("Abc")) }

        FilterChipGroup(
            items = items,
            itemsSelected = itemsSelected.value,
            onClickChip = { clickedLabel, wasSelected ->
                // val previousLabelsSelected = itemsSelected.value
                if (itemsSelected.value.contains(clickedLabel) && !wasSelected) {
                    itemsSelected.value.remove(clickedLabel)
                } else {
                    itemsSelected.value.add(clickedLabel)
                }
                // uncomment this also doesn't work in preview, also in the emulator fails
                // but, works in real devices (see video in this thread)
                // itemsSelected.value = previousLabelsSelected
            }
        )
}

Screenshare - 2021-11-03 8:51:46 AM.webm

[miqbaldc]

Here’s the underlying FilterChipGroup contents

FilterChipGroup_kt.kt

[Nathan Castlehow]

Does this work on a device? To me it looks like it may not work at all as I don't think compose will be notified when you add an item to the hashset.

[Nathan Castlehow]

Compose is notified when the value of the itemSelected mutable state is changed. In this case the value itself isn't changed (it's still the same hashset) but the contents of the hashset are different. Instead of a mutableStateOf you could use a mutableStateListOf.

[miqbaldc]

I tried in the device (it works)

notice the lags, I’m not sure, does this related to the compose, or it’s just a RecyclerView doing the recycling

here’s the video demo

screenshare_-_2021-11-03_12_30_44_am.mp4

[miqbaldc]

This is works in real devices, but not in Compose Preview & Emulator

FilterChipGroup_kt.kt

[Zach Klippenstein (he/him) [MOD]]

It might work in some cases, by accident, if something else happens to trigger a recomposition after you mutate that list, but that is definitely the wrong way to do what you’re trying to do for the reasons Nathan mentions.

[Zach Klippenstein (he/him) [MOD]]

Assigning a state value to itself won’t trigger recomposition since it’s the same value and change notifications only fire for changes.

[Zach Klippenstein (he/him) [MOD]]

Either:
• Delete lines 13 and 19 and use a mutableStateMapOf instead of hashSetOf (a map can act as a set, just use the keys and ignore values)
• Use an immutable set (setOf("Abc")) and then create a new set each time inside onClickChip.

[miqbaldc]

Looks like option 1 promising

Will try the option 2 as well

[Zach Klippenstein (he/him) [MOD]]

Just depends whether you want to have mutable or immutable data structures

[miqbaldc]

Wants to confirm (seems there’s a typo in the previous snippet code). Does the below approach also not recommended?

val previousLabelsSelected = itemsSelected.value
                if (previousLabelsSelected.contains(clickedLabel) && !wasSelected) {
                    previousLabelsSelected.remove(clickedLabel)
                } else {
                    previousLabelsSelected.add(clickedLabel)
                }
                itemsSelected.value = previousLabelsSelected