From f2d54d54367b2af82edad10d3988ed2ec56f1cad Mon Sep 17 00:00:00 2001 From: Doctorwu Date: Sat, 20 Jan 2024 02:44:00 +0800 Subject: [PATCH 1/4] fix(runtime-dom): fix vShow not respect passing display close #10151 --- packages/runtime-dom/src/directives/vShow.ts | 2 +- packages/runtime-dom/src/modules/style.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/directives/vShow.ts b/packages/runtime-dom/src/directives/vShow.ts index 2ab25136e74..d8aab92e71b 100644 --- a/packages/runtime-dom/src/directives/vShow.ts +++ b/packages/runtime-dom/src/directives/vShow.ts @@ -22,7 +22,7 @@ export const vShow: ObjectDirective & { name?: 'show' } = { } }, updated(el, { value, oldValue }, { transition }) { - if (!value === !oldValue) return + if (!value === !oldValue && el.style.display === el[vShowOldKey]) return if (transition) { if (value) { transition.beforeEnter(el) diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts index 6341c8a120e..ef2c55dbbf7 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -38,6 +38,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] = style.display style.display = currentDisplay } } From 62cf0334ff57dab89107140e3b4c5de0f27cff9d Mon Sep 17 00:00:00 2001 From: Doctorwu Date: Sat, 20 Jan 2024 18:26:38 +0800 Subject: [PATCH 2/4] feat(runtime-dom): add test case --- .../__tests__/directives/vShow.spec.ts | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/packages/runtime-dom/__tests__/directives/vShow.spec.ts b/packages/runtime-dom/__tests__/directives/vShow.spec.ts index 70b69f2df1c..c4f169e05e1 100644 --- a/packages/runtime-dom/__tests__/directives/vShow.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vShow.spec.ts @@ -211,4 +211,44 @@ describe('runtime-dom: v-show directive', () => { await nextTick() expect($div.style.display).toEqual('') }) + + // #10151 + test('should respect the display value when v-show value is true', async () => { + const isVisible = ref(false) + const compStyle = ref({ + display: 'none', + }) + + const Component = { + setup() { + return () => { + return withVShow( + h('div', { style: compStyle.value }), + isVisible.value, + ) + } + }, + } + render(h(Component), root) + + const $div = root.children[0] + + expect($div.style.display).toEqual('none') + + isVisible.value = true + await nextTick() + expect($div.style.display).toEqual('none') + + compStyle.value.display = 'block' + await nextTick() + expect($div.style.display).toEqual('block') + + compStyle.value.display = 'inline-block' + await nextTick() + expect($div.style.display).toEqual('inline-block') + + isVisible.value = false + await nextTick() + expect($div.style.display).toEqual('none') + }) }) From 8d9f3423bc9b29da8feb8b04b395fa7f57861dbd Mon Sep 17 00:00:00 2001 From: Doctorwu Date: Sun, 21 Jan 2024 13:07:26 +0800 Subject: [PATCH 3/4] feat(runtime-dom): add test cases --- .../__tests__/directives/vShow.spec.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/__tests__/directives/vShow.spec.ts b/packages/runtime-dom/__tests__/directives/vShow.spec.ts index c4f169e05e1..d4a1bb1969f 100644 --- a/packages/runtime-dom/__tests__/directives/vShow.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vShow.spec.ts @@ -215,15 +215,23 @@ describe('runtime-dom: v-show directive', () => { // #10151 test('should respect the display value when v-show value is true', async () => { const isVisible = ref(false) + const useDisplayStyle = ref(true) const compStyle = ref({ display: 'none', }) + const withoutDisplayStyle = { + margin: '10px', + } const Component = { setup() { return () => { return withVShow( - h('div', { style: compStyle.value }), + h('div', { + style: useDisplayStyle.value + ? compStyle.value + : withoutDisplayStyle, + }), isVisible.value, ) } @@ -247,6 +255,11 @@ describe('runtime-dom: v-show directive', () => { await nextTick() expect($div.style.display).toEqual('inline-block') + useDisplayStyle.value = false + await nextTick() + expect($div.style.display).toEqual('') + expect(getComputedStyle($div).display).toEqual('block') + isVisible.value = false await nextTick() expect($div.style.display).toEqual('none') From bc3a3cd90ca81cd3e586b3fbb6168f54ed6b9682 Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 7 Feb 2024 12:50:53 +0800 Subject: [PATCH 4/4] chore: improve test --- .../runtime-dom/__tests__/directives/vShow.spec.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/runtime-dom/__tests__/directives/vShow.spec.ts b/packages/runtime-dom/__tests__/directives/vShow.spec.ts index d4a1bb1969f..0c299b51b9a 100644 --- a/packages/runtime-dom/__tests__/directives/vShow.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vShow.spec.ts @@ -255,6 +255,14 @@ describe('runtime-dom: v-show directive', () => { await nextTick() expect($div.style.display).toEqual('inline-block') + isVisible.value = false + await nextTick() + expect($div.style.display).toEqual('none') + + isVisible.value = true + await nextTick() + expect($div.style.display).toEqual('inline-block') + useDisplayStyle.value = false await nextTick() expect($div.style.display).toEqual('') @@ -263,5 +271,9 @@ describe('runtime-dom: v-show directive', () => { isVisible.value = false await nextTick() expect($div.style.display).toEqual('none') + + isVisible.value = true + await nextTick() + expect($div.style.display).toEqual('') }) })