From 292a3d15eb1109208f093e3e53846aec8e66db1d Mon Sep 17 00:00:00 2001
From: Windlike <MrWindlike@gmail.com>
Date: Thu, 4 Nov 2021 00:46:17 +0800
Subject: [PATCH] fix(v-show): display is not correct after v-show unbind

fix #11984
---
 src/platforms/web/runtime/directives/show.js |  2 +-
 test/unit/features/directives/show.spec.js   | 28 ++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/platforms/web/runtime/directives/show.js b/src/platforms/web/runtime/directives/show.js
index 17fb5dec20d..abfed3cbcbc 100644
--- a/src/platforms/web/runtime/directives/show.js
+++ b/src/platforms/web/runtime/directives/show.js
@@ -53,7 +53,7 @@ export default {
     oldVnode: VNodeWithData,
     isDestroy: boolean
   ) {
-    if (!isDestroy) {
+    if (!isDestroy && el.style.display === 'none') {
       el.style.display = el.__vOriginalDisplay
     }
   }
diff --git a/test/unit/features/directives/show.spec.js b/test/unit/features/directives/show.spec.js
index dd509577c27..eef98014689 100644
--- a/test/unit/features/directives/show.spec.js
+++ b/test/unit/features/directives/show.spec.js
@@ -81,4 +81,32 @@ describe('Directive v-show', () => {
       expect(vm.$el.firstChild.style.display).toBe('none')
     }).then(done)
   })
+
+  it('should set display correctly when unbind with falsy', done => {
+    const vm = new Vue({
+      template:
+        '<div v-if="tester" v-show="false" style="display: block"></div>' +
+        '<div v-else style="display: flex"></div>',
+      data: { tester: true }
+    }).$mount()
+    expect(vm.$el.style.display).toBe('none')
+    vm.tester = false
+    waitForUpdate(() => {
+      expect(vm.$el.style.display).toBe('flex')
+    }).then(done)
+  })
+
+  it('should set display correctly when unbind with truthy', done => {
+    const vm = new Vue({
+      template:
+        '<div v-if="tester" v-show="true"></div>' +
+        '<div v-else style="display: flex"></div>',
+      data: { tester: true }
+    }).$mount()
+    expect(vm.$el.style.display).toBe('')
+    vm.tester = false
+    waitForUpdate(() => {
+      expect(vm.$el.style.display).toBe('flex')
+    }).then(done)
+  })
 })