fix(UI): select closes clicking on scrollbar

This commit is contained in:
Fabio Di Stasio 2022-05-29 16:42:41 +02:00
parent 34e8d3e5b1
commit 8870304c15
1 changed files with 19 additions and 1 deletions

View File

@ -37,6 +37,8 @@
v-if="isOpen" v-if="isOpen"
ref="optionList" ref="optionList"
:class="`select__list-wrapper ${dropdownClass ? dropdownClass : '' }`" :class="`select__list-wrapper ${dropdownClass ? dropdownClass : '' }`"
@mousedown="isMouseDown = true"
@mouseup="handleMouseUpEvent()"
> >
<ul class="select__list" @mousedown.prevent> <ul class="select__list" @mousedown.prevent>
<li <li
@ -136,6 +138,7 @@ export default defineComponent({
setup (props, { emit }) { setup (props, { emit }) {
const hightlightedIndex = ref(0); const hightlightedIndex = ref(0);
const isOpen = ref(false); const isOpen = ref(false);
const isMouseDown = ref(false);
const internalValue = ref(props.modelValue || props.value); const internalValue = ref(props.modelValue || props.value);
const el = ref(null); const el = ref(null);
const searchInput = ref(null); const searchInput = ref(null);
@ -319,12 +322,24 @@ export default defineComponent({
}; };
const handleBlurEvent = () => { const handleBlurEvent = () => {
if (isMouseDown.value) return;
deactivate(); deactivate();
emit('blur'); emit('blur');
}; };
const handleMouseUpEvent = () => {
isMouseDown.value = false;
searchInput.value.focus();
};
const handleWheelEvent = (e) => {
if (!e.target.className.includes('select__')) deactivate();
};
onMounted(() => { onMounted(() => {
window.addEventListener('resize', adjustListPosition); window.addEventListener('resize', adjustListPosition);
window.addEventListener('wheel', handleWheelEvent);
nextTick(() => { nextTick(() => {
// fix position when the component is created and opened at the same time // fix position when the component is created and opened at the same time
if (isOpen.value) { if (isOpen.value) {
@ -336,6 +351,7 @@ export default defineComponent({
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', adjustListPosition); window.removeEventListener('resize', adjustListPosition);
window.removeEventListener('wheel', handleWheelEvent);
}); });
return { return {
@ -351,10 +367,12 @@ export default defineComponent({
isSelected, isSelected,
keyArrows, keyArrows,
isOpen, isOpen,
isMouseDown,
hightlightedIndex, hightlightedIndex,
optionList, optionList,
optionRefs, optionRefs,
handleBlurEvent handleBlurEvent,
handleMouseUpEvent
}; };
} }
}); });