Improved/automatic positioning logic

[andreasvirkus]

Is your feature request related to a problem? Please describe.

Hi again, Jeff! 👋 Hope you've been well. I thought of originally titling this "Allow for custom positioning logic without appending to the body", but then I thought this request could be a little more universal than that, so i'll break it into two parts:

1. Is there a reason we only look at the calculatePosition prop when appendToBody is set to true? I believe we could also hand over the control even if the user doesn't choose to append the dropdown to the body. Appending the dropdown to the body can lead to tricky situations, since it can break styles when a user has decided to wrap/extend vue-select with their own custom component (e.g. setting defaults and styling). Once the dropdown is added to the body, styles like .my-select .vs__dropdown-menu will no longer apply.

2. Could we provide some automatic direction detection out of the box? For example always use popper or tippy to position the dropdown? The calculate-position="withPopper" example can be greatly simplified and called always? 🤷‍♀️ Popper will try to position the dropdown downwards but if there's not enough space for it, then switch it up

positionRevieweeDropdown(dropdownList, component, { width }) {
  dropdownList.style.width = width
  const popper = createPopper(component.$refs.toggle, dropdownList, { placement: 'bottom' })
  return () => popper.destroy()
}

Describe the solution you'd like

To always use popper and always position it within the .v-select container https://github.com/sagalbot/vue-select/blob/6e1c0dbcbd9971e5ec3a8260d5e035e6c53b8b08/src/directives/appendToBody.js#L13 We could utilise Popper's preventOverflow modifier to handle overflow and z-index issues (like modals as you mentioned in the docs).

Describe alternatives you've considered

I would also be happy with just setting a class to the popper element so my styles would survive.

Additional context

👋

[andreasvirkus]

Just found https://github.com/sagalbot/vue-select/issues/1266#issuecomment-750016484 🤦‍♂️ This mostly solves my issue