IssueTracker

Jetpack Compose version: 1.7.5

Jetpack Compose component(s) used: ObserverModifierNode

Android Studio Build: Android Studio Ladybug | 2024.2.1 #AI-242.21829.142.2421.12409432

Kotlin version: 1.9

Steps to Reproduce or Code Sample to Reproduce:

If a ComposeView is used in RecyclerView, the views get detached when scrolled off screen and reattached again when scrolled back or recycled. When the view is detached, snapshot observations registered within the view get cleared (including any registered using ObserverModifierNode). When the view gets reattached, the ObserverModifierNode doesn't get notified about this and the observers don't get resubscribed.

BoxWithConstraints {
    val adapter = remember { TestAdapter(maxHeight) }.apply { spacerHeight = maxHeight }
    AndroidView(
        factory = {
            RecyclerView(it).apply {
                layoutManager = LinearLayoutManager(it)
                this.adapter = adapter
            }
        },
        modifier = Modifier.fillMaxSize()
    )
}

class TestAdapter(spacerHeight: Dp) : RecyclerView.Adapter<ComposeViewHolder>() {
    var spacerHeight by mutableStateOf(spacerHeight)
    private val states = List(2) { mutableStateOf("") }

    override fun getItemCount() = 3
    override fun getItemViewType(position: Int) = if (position == 1) 0 else 1
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = ComposeViewHolder(ComposeView(parent.context))

    override fun onBindViewHolder(viewHolder: ComposeViewHolder, position: Int) {
        viewHolder.view.setContent {
            if (viewHolder.itemViewType == 0) {
                Spacer(Modifier.height(spacerHeight))
            } else {
                ObserverModifierTest(states[if (position == 0) 0 else 1])
            }
        }
    }
}

class ComposeViewHolder(val view: ComposeView) : ViewHolder(view)

@Composable
fun ObserverModifierTest(state: MutableState<String>) {
    TextField(state.value, { state.value = it }, TestObserverModifier(state))
}

data class TestObserverModifier(private val state: MutableState<String>) : ModifierNodeElement<TestObserverModifierNode>() {
    override fun create() = TestObserverModifierNode(state)
    override fun update(node: TestObserverModifierNode) { node.state = state }
}

class TestObserverModifierNode(var state: MutableState<String>) : Modifier.Node(), ObserverModifierNode {
    override fun onAttach() = onObservedReadsChanged()
    override fun onObservedReadsChanged() = observeReads { println(state.value) }
}

• Type in the first TextField -> the modifier prints on each value update.
• Scroll to bottom and type in the second TextField -> the modifier prints on each value update.
• Scroll back to top, type in the first text field -> nothing printed.
• Same for the bottom field if scrolled down again.

If the ComposeView's content is wrapped with key(position) {}, this doesn't happen when views are recycled, but still happens when a view gets detached/reattached without being recycled.

Changing the node to the following fixes the issue:

class TestObserverModifierNode(val view: View, var state: MutableState<String>) : Modifier.Node(), ObserverModifierNode {

    private val viewAttachListener = object : OnAttachStateChangeListener {
        override fun onViewAttachedToWindow(v: View) = onObservedReadsChanged()
        override fun onViewDetachedFromWindow(v: View) {}
    }

    override fun onAttach() {
        onObservedReadsChanged()
        view.addOnAttachStateChangeListener(viewAttachListener)
    }

    override fun onDetach() = view.removeOnAttachStateChangeListener(viewAttachListener)

    override fun onObservedReadsChanged() = observeReads { println(state.value) }
}