Wrap dropdown content within something else or modify it? (slot)

[dvlden]

Is your feature request related to a problem? Please describe. I am not a fan of default/system scrollbar and I usually use the library perfect-scrollbar to modify this.

Describe the solution you'd like I'd like to wrap the existing container within my custom component for perfect-scrollbar so that it hides system one and use JS one.

Describe alternatives you've considered I don't think that any alternatives support this feature.

Additional context Add any other context or screenshots about the feature request here.

That ugly scrollbar has got to go...

[sagalbot]

Unfortunately, there's not currently any way to wrap the dropdown. I've opened #1134 to track progress on this there.

[romeomihalovics]

There is a workaround if you'd like to wrap the selector list with perfect scrollbar. You just have to listen to the open and close events on your vue-select and add a ref to it, then you can just simply do something like this 🤷🏻‍♂️

<v-select
    ...
    ref="selector"
    @open="selectorOpen()"
    @close="selectorClose()"
    ...
></v-select>

import PerfectScrollbar from 'perfect-scrollbar';
...
data () {
  return {
    ...
    ps: null,
    ...
  };
},
methods: {
  ...
  selectorOpen () {
    this.$nextTick(() => {
      const list = this.$refs.selector.$el.querySelector('.vs__dropdown-menu');
      this.ps = new PerfectScrollbar(list);
      this.ps.update();
    });
  },
  selectorClose () {
    this.ps.destroy();
  },
  ...
}
...

(You could also set the overflow to hidden on the vs__dropdown-menu class with css, to avoid showing the default scrollbar & dont forget to call the ps.update() method when the search event is triggered on the selector, if its searchable)