diff --git a/packages/runtime-dom/__tests__/directives/vShow.spec.ts b/packages/runtime-dom/__tests__/directives/vShow.spec.ts index 70b69f2df1c..b03364cce40 100644 --- a/packages/runtime-dom/__tests__/directives/vShow.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vShow.spec.ts @@ -177,6 +177,25 @@ describe('runtime-dom: v-show directive', () => { expect($div.style.display).toEqual('block') }) + test('the value of `display` set by v-show should not be overwritten display', async () => { + const style = ref() + const display = ref(true) + const component = defineComponent({ + render() { + return withVShow(h('div', { style: style.value }), display.value) + }, + }) + render(h(component), root) + + const $div = root.children[0] + + expect($div.style.display).toEqual('') + + style.value = { display: 'inline-block' } + await nextTick() + expect($div.style.display).toEqual('inline-block') + }) + // #2583, #2757 test('the value of `display` set by v-show should not be overwritten by the style attribute when updated (with Transition)', async () => { const style = ref('width: 100px') diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts index 6341c8a120e..d8d2c505f3c 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -38,7 +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) { - style.display = currentDisplay + style.display = currentDisplay || style.display } }