Open direction - UP

[batuotasis]

Hi, many thanks for implementing html5 required feature. I think your project is going to be very popular because everybody who uses vue-multiselect and plans to migrate to vue3 looks for alternatives and your project stands out from the rest.

I'm writing for another feature request. Currently if multiselect is near the bottom of modal , or near the bottom of page it opens to bottom and user has to scroll down to see available options. This is very unpleasant experience, especially if user uses mobile phone. Is there any way to get open direction to top?

[JayPalm]

I'm encountering a similar need. I was looking around at other examples of how to deal with dropdown/up and found this example using popper. Would be nice to have some sort of auto-positioning, but not sure how difficult that would be.

[adamberecz]

Added in 1.5.0. It's not auto-positioning yet, but solves the unpleasant UX when needed.

[gabriellatavares]

Hello! Thanks for this amazing project. Are there any plans to have this auto-positioning feature?

[mreduar]

I would like to use this library with popper, as I am currently dealing with an overflow problem that is easily solved with popper. Is there any way to do it @adamberecz?

[silversurfer5150]

@adamberecz excellent feature , really looks and behaves great but I also have the same question if you have any news on the dropdown auto positioning ?

[alex-lmt]

@adamberecz nice to have openDirection, but I would be glad to see auto-position feature as well!

Is it at least planned or under construction?

Regards

[YuLogun]

@adamberecz
Hello, Adam! Thanks for your hard work!

I'd like to inform that we still need auto positioning option!
Reopen the issue, please 🙏

[abdul-alhasany]

You can resolve this issue using open event.

Calculate the difference between multiselect element top offset and the parent element top offset. Then change the open-direction prop through a ref.

<template>
    <div ref="element">
        <Multiselect :open-direction="openDirection" @open="onOpen" />
    </div>
</template>

<script setup lang="ts">
const element = ref<HTMLElement | null>();
const openDirection = ref<'bottom' | 'top'>('bottom');
const onOpen = () => {
    if (!element.value || !element.value.offsetParent) {
        return;
    }

    const parentHeight = element.value.offsetParent.clientHeight;
    const position = element.value.offsetTop;

    const difference = parentHeight - position;
    if (difference < 200) { // <-- Change value as needed
        openDirection.value = 'top';
    }
};
</script>

Few notes:

• wrap multiselect component inside another element. Vue3 does not expose inner div unless explicitly specified, and multiselect does not expose it.
• add relative position to the parent to be considered an offset parent.
• I noticed that when including custom classes (I used tailwind), it will mess up some of the classes, so you need to adjust that as well if you run into display issues.
• This is a temporary solution (but it works).