From 2cd5b05c3bf171be5c0b473c084c01704a058ffa Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 9 Feb 2024 08:30:51 +0800 Subject: [PATCH] revert: fix(runtime-dom): ensure v-show respects display value set via v-bind (#10161) This reverts commit 9b19f0912104bfccb10c8cf5beab02b21a648935. close #10294 reopen #10151 --- .../__tests__/directives/vShow.spec.ts | 65 ------------------- packages/runtime-dom/src/directives/vShow.ts | 2 +- packages/runtime-dom/src/modules/style.ts | 1 - 3 files changed, 1 insertion(+), 67 deletions(-) diff --git a/packages/runtime-dom/__tests__/directives/vShow.spec.ts b/packages/runtime-dom/__tests__/directives/vShow.spec.ts index 0c299b51b..70b69f2df 100644 --- a/packages/runtime-dom/__tests__/directives/vShow.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vShow.spec.ts @@ -211,69 +211,4 @@ 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 useDisplayStyle = ref(true) - const compStyle = ref({ - display: 'none', - }) - const withoutDisplayStyle = { - margin: '10px', - } - - const Component = { - setup() { - return () => { - return withVShow( - h('div', { - style: useDisplayStyle.value - ? compStyle.value - : withoutDisplayStyle, - }), - 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') - - isVisible.value = true - 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') - - isVisible.value = true - await nextTick() - expect($div.style.display).toEqual('') - }) }) diff --git a/packages/runtime-dom/src/directives/vShow.ts b/packages/runtime-dom/src/directives/vShow.ts index d8aab92e7..2ab25136e 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 && el.style.display === el[vShowOldKey]) return + if (!value === !oldValue) 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 ef2c55dbb..6341c8a12 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -38,7 +38,6 @@ 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 } }