Vue-select: Need vue-select dropdown direction props

[FrozenIce0617]

Feature: Please add new props which can set the direction of dropdown list.

Expected:

<vue-select
  options={options}
  direction="bottom" (or "top" when I need to show the dropdown in upper direction)
  ...
/>

Thanks.

[sagalbot]

Proposed in #562. Will add to the roadmap.

[icithis]

I wrote a CSS workaround for the time being, which requires a parent element to have the appropriate vue-select-up class. This works for my use case, and potentially for others waiting on this to be implemented.

.vue-select-up .v-select.open .dropdown-toggle {
  border-bottom-color: rgba(60,60,60,.26) !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  border-top-color: transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.vue-select-up .v-select .dropdown-menu {
  top: auto !important;
  box-shadow: 0 -3px 6px 0 rgba(0,0,0,.15) !important;
  border-radius: 4px 4px 0 0 !important;
  border-top: 1px solid rgba(0,0,0,.26) !important;
  border-bottom: none !important;
  bottom: calc(100% - 1px);
}

[sagalbot]

Fixed in 3.7.0 https://vue-select.org/guide/positioning.html