[compose-dom] Let classes lists get merged instead of overriding earl…

…ier calls
JetBrains · May 25, 2021 · 2b788ef · 2b788ef
1 parent 619a0a4
commit 2b788ef
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 1 deletion.
diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/DomApplier.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/DomApplier.kt
@@ -47,6 +47,9 @@ class DomNodeWrapper(val node: Node) {
 
     fun updateProperties(list: List<Pair<(HTMLElement, Any) -> Unit, Any>>) {
         val htmlElement = node as? HTMLElement ?: return
+
+        if (node.className.isNotEmpty()) node.className = ""
+
         list.forEach { it.first(htmlElement, it.second) }
     }
 

diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/attributes/AttrsBuilder.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/attributes/AttrsBuilder.kt
@@ -74,6 +74,5 @@ class ClassesAttrBuilder {
 }
 
 val setClassList: (HTMLElement, Array<out String>) -> Unit = { e, classList ->
-    e.className = ""
     e.classList.add(*classList)
 }
diff --git a/web/core/src/jsTest/kotlin/elements/AttributesTests.kt b/web/core/src/jsTest/kotlin/elements/AttributesTests.kt
@@ -6,9 +6,11 @@ import androidx.compose.runtime.setValue
 import androidx.compose.web.attributes.disabled
 import androidx.compose.web.attributes.forId
 import androidx.compose.web.elements.Button
+import androidx.compose.web.elements.Div
 import androidx.compose.web.elements.Label
 import androidx.compose.web.elements.Text
 import org.w3c.dom.HTMLButtonElement
+import org.w3c.dom.HTMLDivElement
 import runTest
 import kotlin.test.Test
 import kotlin.test.assertEquals
@@ -80,4 +82,87 @@ class AttributesTests {
 
         assertEquals("", btn.getAttribute("disabled"))
     }
+
+    @Test
+    fun multipleClassesCallsAddMoreClasses() = runTest {
+        composition {
+            Div(attrs = {
+                classes("a", "b")
+                classes("c", "d")
+            }) {}
+        }
+
+        val div = root.firstChild as HTMLDivElement
+        assertEquals(
+            expected = "a b c d",
+            actual = div.getAttribute("class")
+        )
+    }
+
+    @Test
+    fun multipleClassesBuildersCallsAddMoreClasses() = runTest {
+        composition {
+            Div(attrs = {
+                classes("a", "b")
+                classes {
+                    +"c"
+                    +"d"
+                }
+            }) {}
+        }
+
+        val div = root.firstChild as HTMLDivElement
+        assertEquals(
+            expected = "a b c d",
+            actual = div.getAttribute("class")
+        )
+    }
+
+
+    @Test
+    fun multipleClassesBuildersCallsAddMoreClasses2() = runTest {
+        composition {
+            Div(attrs = {
+                classes {
+                    +"c"
+                    +"d"
+                }
+                classes("a", "b")
+            }) {}
+        }
+
+        val div = root.firstChild as HTMLDivElement
+        assertEquals(
+            expected = "c d a b",
+            actual = div.getAttribute("class")
+        )
+    }
+
+    @Test
+    fun multipleClassesBuildersCallsWithConditionsAddCorrectClasses() = runTest {
+        val addClassD = mutableStateOf(true)
+        composition {
+            Div(attrs = {
+                classes {
+                    +"c"
+                    if (addClassD.value) +"d"
+                }
+                classes("a", "b")
+            }) {}
+        }
+
+        val div = root.firstChild as HTMLDivElement
+        assertEquals(
+            expected = "c d a b",
+            actual = div.getAttribute("class")
+        )
+
+        addClassD.value = false
+        waitChanges()
+
+        assertEquals(
+            expected = "c a b",
+            actual = div.getAttribute("class")
+        )
+    }
 }