Skip to content

Commit

Permalink
fix(runtime-dom): ensure v-show respects display value set via v-bind (
Browse files Browse the repository at this point in the history
  • Loading branch information
zh-lx authored Feb 9, 2024
1 parent 5d48844 commit c224897
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 2 deletions.
98 changes: 98 additions & 0 deletions packages/runtime-dom/__tests__/directives/vShow.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -211,4 +211,102 @@ 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('')
})

// #10294
test('should record display by vShowOldKey only when display exists in style', async () => {
const isVisible = ref(false)
const style = ref({
margin: '10px',
})

const Component = {
setup() {
return () => {
return withVShow(
h('div', {
style: style.value,
}),
isVisible.value,
)
}
},
}
render(h(Component), root)
const $div = root.children[0]

expect($div.style.display).toEqual('none')

style.value.margin = '20px'
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) return
if (!value === !oldValue && el.style.display === el[vShowOldKey]) return
if (transition) {
if (value) {
transition.beforeEnter(el)
Expand Down
10 changes: 9 additions & 1 deletion packages/runtime-dom/src/modules/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ import { CSS_VAR_TEXT } from '../helpers/useCssVars'

type Style = string | Record<string, string | string[]> | null

const displayRE = /(^|;)\s*display\s*:/

export function patchStyle(el: Element, prev: Style, next: Style) {
const style = (el as HTMLElement).style
const currentDisplay = style.display
const isCssString = isString(next)
const currentDisplay = style.display
let hasControlledDisplay = false
if (next && !isCssString) {
if (prev && !isString(prev)) {
for (const key in prev) {
Expand All @@ -18,6 +21,9 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
}
}
for (const key in next) {
if (key === 'display') {
hasControlledDisplay = true
}
setStyle(style, key, next[key])
}
} else {
Expand All @@ -29,6 +35,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
;(next as string) += ';' + cssVarText
}
style.cssText = next as string
hasControlledDisplay = displayRE.test(next)
}
} else if (prev) {
el.removeAttribute('style')
Expand All @@ -38,6 +45,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] = hasControlledDisplay ? style.display : ''
style.display = currentDisplay
}
}
Expand Down

0 comments on commit c224897

Please sign in to comment.