Skip to content

Commit

Permalink
revert: fix(runtime-dom): ensure v-show respects display value set vi…
Browse files Browse the repository at this point in the history
…a v-bind (#10161)

This reverts commit 9b19f09.

close #10294
reopen #10151
  • Loading branch information
yyx990803 committed Feb 9, 2024
1 parent 1339330 commit 2cd5b05
Show file tree
Hide file tree
Showing 3 changed files with 1 addition and 67 deletions.
65 changes: 0 additions & 65 deletions packages/runtime-dom/__tests__/directives/vShow.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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('')
})
})
2 changes: 1 addition & 1 deletion packages/runtime-dom/src/directives/vShow.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const vShow: ObjectDirective<VShowElement> & { 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)
Expand Down
1 change: 0 additions & 1 deletion packages/runtime-dom/src/modules/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
Expand Down

0 comments on commit 2cd5b05

Please sign in to comment.