mirror of https://github.com/Fabio286/antares.git
fix(UI): select closes clicking on scrollbar
This commit is contained in:
parent
34e8d3e5b1
commit
8870304c15
|
@ -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
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue