fix(runtime-dom): handle multiple patch with falsy style value

linzhe141 · Nov 12, 2024 · 58464f2 · 58464f2
1 parent ed01d92
commit 58464f2
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts
@@ -79,6 +79,32 @@ describe(`runtime-dom: style patching`, () => {
     expect(el.style.width).toBe('0px')
   })
 
+  it('multiple patch with falsy style value', () => {
+    const el = document.createElement('div')
+    const styleA = {
+      left: 0,
+      right: false,
+      top: 0,
+      bottom: false,
+    }
+    patchProp(el as any, 'style', null, styleA)
+    expect(el.style.left).toBe('0px')
+    expect(el.style.right).toBe('')
+    expect(el.style.top).toBe('0px')
+    expect(el.style.bottom).toBe('')
+    const styleB = {
+      left: false,
+      right: 0,
+      top: false,
+      bottom: 0,
+    }
+    patchProp(el as any, 'style', styleA, styleB)
+    expect(el.style.left).toBe('')
+    expect(el.style.right).toBe('0px')
+    expect(el.style.top).toBe('')
+    expect(el.style.bottom).toBe('0px')
+  })
+
   it('should remove style attribute on falsy value', () => {
     const el = document.createElement('div')
     el.style.cssText = 'color: red;'

diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
@@ -19,14 +19,14 @@ export function patchStyle(el: Element, prev: Style, next: Style): void {
     if (prev) {
       if (!isString(prev)) {
         for (const key in prev) {
-          if (next[key] == null) {
+          if (!next[key]) {
             setStyle(style, key, '')
           }
         }
       } else {
         for (const prevStyle of prev.split(';')) {
           const key = prevStyle.slice(0, prevStyle.indexOf(':')).trim()
-          if (next[key] == null) {
+          if (!next[key]) {
             setStyle(style, key, '')
           }
         }