From 6504196bc9743410dadcb75f098e8cac2ddfd2b3 Mon Sep 17 00:00:00 2001
From: Oleksandr Karpovich <a.n.karpovich@gmail.com>
Date: Tue, 3 Aug 2021 11:54:49 +0200
Subject: [PATCH] web: fix a bug when inline styles get empty after attributes
 update (#980)

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
---
 .../org/jetbrains/compose/web/DomApplier.kt   |  7 ++++--
 .../jsTest/kotlin/elements/AttributesTests.kt | 24 +++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

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<String, String>? = null
+
     fun updateAttrs(attrs: Map<String, String>) {
-        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<Pair<(Element, Any) -> 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("""<button style="color: red;">Button</button>""", root.innerHTML)
+
+        hasValue = true
+        waitForAnimationFrame()
+
+        assertEquals("""<button style="color: red;" value="buttonValue">Button</button>""", root.innerHTML)
+    }
 }