diff --git a/packages/runtime-dom/__tests__/directives/vShow.spec.ts b/packages/runtime-dom/__tests__/directives/vShow.spec.ts index 70b69f2df1c..0c299b51b9a 100644 --- a/packages/runtime-dom/__tests__/directives/vShow.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vShow.spec.ts @@ -211,4 +211,69 @@ 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 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 } }