diff --git a/web/core/src/jsMain/kotlin/androidx/compose/web/DomApplier.kt b/web/core/src/jsMain/kotlin/androidx/compose/web/DomApplier.kt index f38900a12a..cf232b3d66 100644 --- 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 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 index f224ee1900..bdac62c0b9 100644 --- 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) -> 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 index 1a5f4708e9..864ac5d553 100644 --- 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") + ) + } } \ No newline at end of file