web: fix a bug when inline styles get empty after attributes update (#980)

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>

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) {
+        currentAttrs?.forEach {
-            node.removeAttributeNode(node.attributes[0]!!)
+            node.removeAttribute(it.key)
         }
 
         attrs.forEach {
             node.setAttribute(it.key, it.value)
         }
+        currentAttrs = attrs
     }
 
     fun updateProperties(list: List<Pair<(Element, Any) -> Unit, Any>>) {

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)
+    }
 }