From 8b47699d906ed0aea2be5a3a4ac71fb145fc00f6 Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Thu, 8 Feb 2024 16:52:40 +0000
Subject: [PATCH 1/3] fix: the value of display is sometimes incorrect with
 v-show

---
 .../__tests__/directives/vShow.spec.ts        | 33 +++++++++++++++++++
 packages/runtime-dom/src/modules/style.ts     | 14 +++++++-
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-dom/__tests__/directives/vShow.spec.ts b/packages/runtime-dom/__tests__/directives/vShow.spec.ts
index 0c299b51b9a..fddafaaf823 100644
--- a/packages/runtime-dom/__tests__/directives/vShow.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vShow.spec.ts
@@ -276,4 +276,37 @@ describe('runtime-dom: v-show directive', () => {
     await nextTick()
     expect($div.style.display).toEqual('')
   })
+
+  // #10294
+  test('should record display by vShowOldKey only when display exists in style', async () => {
+    const isVisible = ref(false)
+    const style = ref({
+      margin: '10px',
+    })
+
+    const Component = {
+      setup() {
+        return () => {
+          return withVShow(
+            h('div', {
+              style: style.value,
+            }),
+            isVisible.value,
+          )
+        }
+      },
+    }
+    render(h(Component), root)
+    const $div = root.children[0]
+
+    expect($div.style.display).toEqual('none')
+
+    style.value.margin = '20px'
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    isVisible.value = true
+    await nextTick()
+    expect($div.style.display).toEqual('')
+  })
 })
diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
index ef2c55dbbf7..f250092a786 100644
--- a/packages/runtime-dom/src/modules/style.ts
+++ b/packages/runtime-dom/src/modules/style.ts
@@ -38,7 +38,19 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
   // so we always keep the current `display` value regardless of the `style`
   // value, thus handing over control to `v-show`.
   if (vShowOldKey in el) {
-    el[vShowOldKey] = style.display
+    el[vShowOldKey] = ''
+    if (next) {
+      if (
+        (!isCssString && next.display != null) ||
+        (isCssString &&
+          next
+            .split(';')
+            .some(item => item.split(':')[0]?.trim() === 'display'))
+      ) {
+        el[vShowOldKey] = style.display
+      }
+    }
+
     style.display = currentDisplay
   }
 }

From 4d35bb755a0bdff885ee019fc3a33ee73ca1caef Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Thu, 8 Feb 2024 17:51:05 +0000
Subject: [PATCH 2/3] fix: the value of display is sometimes incorrect with
 v-show

---
 packages/runtime-dom/src/modules/style.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
index f250092a786..4033d0ad67b 100644
--- a/packages/runtime-dom/src/modules/style.ts
+++ b/packages/runtime-dom/src/modules/style.ts
@@ -50,7 +50,6 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
         el[vShowOldKey] = style.display
       }
     }
-
     style.display = currentDisplay
   }
 }

From dcbc5013d306ca8c9d1cf0b8d9ca36fcd6a74805 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 9 Feb 2024 09:30:16 +0800
Subject: [PATCH 3/3] refactor: simplify implementation

---
 packages/runtime-dom/src/modules/style.ts | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
index 4033d0ad67b..9f897a6b2b0 100644
--- a/packages/runtime-dom/src/modules/style.ts
+++ b/packages/runtime-dom/src/modules/style.ts
@@ -5,10 +5,13 @@ import { CSS_VAR_TEXT } from '../helpers/useCssVars'
 
 type Style = string | Record<string, string | string[]> | null
 
+const displayRE = /(^|;)\s*display\s*:/
+
 export function patchStyle(el: Element, prev: Style, next: Style) {
   const style = (el as HTMLElement).style
-  const currentDisplay = style.display
   const isCssString = isString(next)
+  const currentDisplay = style.display
+  let hasControlledDisplay = false
   if (next && !isCssString) {
     if (prev && !isString(prev)) {
       for (const key in prev) {
@@ -18,6 +21,9 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
       }
     }
     for (const key in next) {
+      if (key === 'display') {
+        hasControlledDisplay = true
+      }
       setStyle(style, key, next[key])
     }
   } else {
@@ -29,6 +35,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
           ;(next as string) += ';' + cssVarText
         }
         style.cssText = next as string
+        hasControlledDisplay = displayRE.test(next)
       }
     } else if (prev) {
       el.removeAttribute('style')
@@ -38,18 +45,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
   // so we always keep the current `display` value regardless of the `style`
   // value, thus handing over control to `v-show`.
   if (vShowOldKey in el) {
-    el[vShowOldKey] = ''
-    if (next) {
-      if (
-        (!isCssString && next.display != null) ||
-        (isCssString &&
-          next
-            .split(';')
-            .some(item => item.split(':')[0]?.trim() === 'display'))
-      ) {
-        el[vShowOldKey] = style.display
-      }
-    }
+    el[vShowOldKey] = hasControlledDisplay ? style.display : ''
     style.display = currentDisplay
   }
 }