[Feature Request] Choose positioning for appendToBody

[kaiserkiwi]

Hi there,

I just discovered the incredibly useful option to append the Multiselect to the body in case I use it in a modal. This works absolutely awesome. But I have another use case for this, as we use a sidebar component, that is fixed but the content is still scrollable.

The problem is, that the dropdown list scrolls away and is not accessible anymore. This can easily be fixed by position: fixed;, but has to be injected pretty hacky currently like this:

.multiselect-dropdown[style*='position: absolute'] {
	position: fixed !important;
}

It works but is a bit brittle, as I could imagine to collide with some other style, if I apply this to every dropdown that is positioned absolute.

My idea is to either add another property where we can control the way of positioning or allowing a boolean and a string to the appendToBody property. So if I just say :append-to-body="true" it's positioned absolute and this way it's backwards compatible. But if I write append-to-body="fixed" the positioning is changed.

The current code for this is in src/composables/useDropdown.js inside of the dropdownStyles computed property.

return {
	position: 'absolute',
	zIndex: 9999,
	// ... additional styles
}

It could look like this in the future:

return {
	position: appendToBody.value === true ? 'absolute' : appendToBody.value,
	zIndex: 9999,
	// ... additional styles
}

I guess this would make this pretty useful feature even more useful.

Thanks for reading up to here.