JetBrains / compose-multiplatform

Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
https://jetbrains.com/lp/compose-multiplatform
Apache License 2.0
15.87k stars 1.15k forks source link

[Web/dom] `Style` + `if` make recompositions be appended rather than replaced #2568

Open ptitjes opened 1 year ago

ptitjes commented 1 year ago

When using a stylesheet and an if statement, it seems that the recomposed content of the if statement is prepended to the existing content rather replacing it.

import androidx.compose.runtime.*
import org.jetbrains.compose.web.*
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.*

fun startApp() {
    renderComposable(rootElementId = "root") {
        Style(AppStylesheet)
        Test()
    }
}

@Composable
fun Test() {
    var counter by remember { mutableStateOf(0) }

    if (counter % 2 == 0) {
        P({ classes(AppStylesheet.counter) }) {
            Text("$counter < Even")
        }
    } else {
        P({ classes(AppStylesheet.counter) }) {
            Text("$counter < Odd")
        }
    }

    Button({ onClick { counter++ } }) {
        Text("Increment")
    }
}

object AppStylesheet : StyleSheet() {
    val counter by style {
        fontWeight("bold")
    }
}

Screencast from 2022-12-19 18-13-40.webm

Tested on Kotlin 1.7.20 + Compose Multiplatform 1.2.2 (no compiler override).

eymar commented 1 year ago

@ptitjes Let's try to find more details.

I tried to reproduce the issue, but no luck so far. Here is a project I created with the code thar you provided https://github.com/eymar/repr_compose_2568

I even used //compose.kotlinCompilerPlugin.set("androidx.compose.compiler:compiler:1.4.0-alpha02") and #kotlin.version=1.7.21 and the behaviour was correct (no appends)

Perhaps you could try this project and share your example on github? I'm wondering what's the difference.

ptitjes commented 1 year ago

OK. I will try it this evening. Thanks a lot for creating the project.

eymar commented 1 year ago

@ptitjes Did you have a chance to try it? :)

ptitjes commented 1 year ago

@eymar I am very sorry, I did not find time yet. I will try this weekend.

alexzhirkevich commented 1 year ago

Same issue was with Kotlin 1.7.20 + Compose 1.2.1. Solved by updating compose to 1.2.2.

Repr project works fine with both versions. Looks like this bug depends on something more than only stylesheet.

okushnikov commented 1 month ago

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.