diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/DomApplier.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/DomApplier.kt index d3ee896f66..411477e74d 100644 --- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/DomApplier.kt +++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/DomApplier.kt @@ -93,14 +93,17 @@ open class DomNodeWrapper(open val node: Node) { class DomElementWrapper(override val node: HTMLElement): DomNodeWrapper(node) { + private var currentAttrs: Map? = null + fun updateAttrs(attrs: Map) { - while (node.attributes.length > 0) { - node.removeAttributeNode(node.attributes[0]!!) + currentAttrs?.forEach { + node.removeAttribute(it.key) } attrs.forEach { node.setAttribute(it.key, it.value) } + currentAttrs = attrs } fun updateProperties(list: List Unit, Any>>) { diff --git a/web/core/src/jsTest/kotlin/elements/AttributesTests.kt b/web/core/src/jsTest/kotlin/elements/AttributesTests.kt index a02bbce76d..a52e393b30 100644 --- a/web/core/src/jsTest/kotlin/elements/AttributesTests.kt +++ b/web/core/src/jsTest/kotlin/elements/AttributesTests.kt @@ -6,6 +6,7 @@ import androidx.compose.runtime.setValue import org.jetbrains.compose.web.attributes.AttrsBuilder import org.jetbrains.compose.web.attributes.disabled import org.jetbrains.compose.web.attributes.forId +import org.jetbrains.compose.web.attributes.value import org.jetbrains.compose.web.css.* import org.jetbrains.compose.web.dom.Button import org.jetbrains.compose.web.dom.Div @@ -331,4 +332,27 @@ class AttributesTests { assertEquals(2, attrsCallCounter) assertEquals(0, refDisposeCounter) } + + @Test // issue: https://github.com/JetBrains/compose-jb/issues/981 + fun attributesUpdateShouldNotCauseInlineStylesCleanUp() = runTest { + var hasValue by mutableStateOf(false) + + composition { + Button(attrs = { + style { + color(Color.red) + } + if (hasValue) value("buttonValue") + }) { + Text("Button") + } + } + + assertEquals("""""", root.innerHTML) + + hasValue = true + waitForAnimationFrame() + + assertEquals("""""", root.innerHTML) + } }