Skip to content

Instantly share code, notes, and snippets.

@sigma207
Created March 10, 2020 09:28
Show Gist options
  • Save sigma207/b9300fe12a996c07b2389ee03c1464ed to your computer and use it in GitHub Desktop.
Save sigma207/b9300fe12a996c07b2389ee03c1464ed to your computer and use it in GitHub Desktop.
vue-multiselect overflow directive
<template>
<multiselect
v-select-overflow
...
/>
</template>
export default {
install(Vue) {
Vue.directive('select-overflow', {
inserted: (el, _binding, vnode) => {
let originalWidth
let originalPosition
let originalZIndex
let selectIsOpen = false
vnode.child.$watch('isOpen', isOpen => {
selectIsOpen = isOpen
if (isOpen) {
const { offsetWidth } = el
originalWidth = el.style.width
originalPosition = el.style.position
originalZIndex = el.style.zIndex
el.style.width = `${offsetWidth}px`
el.style.position = 'fixed'
el.style.zIndex = 2
} else {
el.style.position = originalPosition
el.style.width = originalWidth
el.style.zIndex = originalZIndex
}
})
window.addEventListener('wheel', event => {
if (selectIsOpen) {
// disabled outside scroll when select is open
event.stopPropagation()
}
}, true)
},
})
}
}
@Kocal
Copy link

Kocal commented Jul 17, 2020

A patched version is available here: shentao/vue-multiselect#723 (comment)

@atymic
Copy link

atymic commented Nov 6, 2023

Is there a vue3 version?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment