Skip to content

Commit 9b19f09

Browse files
authoredFeb 7, 2024··
fix(runtime-dom): ensure v-show respects display value set via v-bind (#10161)
close #10151
1 parent cb87b62 commit 9b19f09

File tree

3 files changed

+67
-1
lines changed

3 files changed

+67
-1
lines changed
 

‎packages/runtime-dom/__tests__/directives/vShow.spec.ts

+65
Original file line numberDiff line numberDiff line change
@@ -211,4 +211,69 @@ describe('runtime-dom: v-show directive', () => {
211211
await nextTick()
212212
expect($div.style.display).toEqual('')
213213
})
214+
215+
// #10151
216+
test('should respect the display value when v-show value is true', async () => {
217+
const isVisible = ref(false)
218+
const useDisplayStyle = ref(true)
219+
const compStyle = ref({
220+
display: 'none',
221+
})
222+
const withoutDisplayStyle = {
223+
margin: '10px',
224+
}
225+
226+
const Component = {
227+
setup() {
228+
return () => {
229+
return withVShow(
230+
h('div', {
231+
style: useDisplayStyle.value
232+
? compStyle.value
233+
: withoutDisplayStyle,
234+
}),
235+
isVisible.value,
236+
)
237+
}
238+
},
239+
}
240+
render(h(Component), root)
241+
242+
const $div = root.children[0]
243+
244+
expect($div.style.display).toEqual('none')
245+
246+
isVisible.value = true
247+
await nextTick()
248+
expect($div.style.display).toEqual('none')
249+
250+
compStyle.value.display = 'block'
251+
await nextTick()
252+
expect($div.style.display).toEqual('block')
253+
254+
compStyle.value.display = 'inline-block'
255+
await nextTick()
256+
expect($div.style.display).toEqual('inline-block')
257+
258+
isVisible.value = false
259+
await nextTick()
260+
expect($div.style.display).toEqual('none')
261+
262+
isVisible.value = true
263+
await nextTick()
264+
expect($div.style.display).toEqual('inline-block')
265+
266+
useDisplayStyle.value = false
267+
await nextTick()
268+
expect($div.style.display).toEqual('')
269+
expect(getComputedStyle($div).display).toEqual('block')
270+
271+
isVisible.value = false
272+
await nextTick()
273+
expect($div.style.display).toEqual('none')
274+
275+
isVisible.value = true
276+
await nextTick()
277+
expect($div.style.display).toEqual('')
278+
})
214279
})

‎packages/runtime-dom/src/directives/vShow.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
2222
}
2323
},
2424
updated(el, { value, oldValue }, { transition }) {
25-
if (!value === !oldValue) return
25+
if (!value === !oldValue && el.style.display === el[vShowOldKey]) return
2626
if (transition) {
2727
if (value) {
2828
transition.beforeEnter(el)

‎packages/runtime-dom/src/modules/style.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
3838
// so we always keep the current `display` value regardless of the `style`
3939
// value, thus handing over control to `v-show`.
4040
if (vShowOldKey in el) {
41+
el[vShowOldKey] = style.display
4142
style.display = currentDisplay
4243
}
4344
}

0 commit comments

Comments
 (0)
Please sign in to comment.