Multi-column dropdown menus?

[lucy-at-mc]

I know that this is a hard ask, but I will leave it here anyway in the hopes that someday you will be able to implement this.

It would be totally awesome if one day Virtual-Select could handle multi-column dropdown menus like these:
https://www.jqueryscript.net/demo/multi-column-dropdown-select-bootstrap/

Bonus points if either columns or rows of such a multi-column environment could be organized into different groups.

One can dream!

(bur for real, if anyone has suggestions of how to achieve that with current virtual-select, I would love to give it a try!)

[lucy-at-mc]

Just to get the ball rolling, I gave this a try. It's actually very easy to change CSS to display the options in multiple columns. One could simply add something like the following in their CSS:

  .vscomp-options {
      display: flex !important;
      flex-direction: column !important;
      flex-wrap: wrap !important;
      max-height: 200px !important;
      overflow-x: auto !important;
    }

Now, the problem is that the vertical bar scrolling gets messed up. See the following minimal working example:
https://codepen.io/Lucy-M-the-styleful/pen/empRXam

I suspect that this is happening simply because Virtual Select defines the length of the vertical scroll bar scrolling as a function of the number of options (which makes sense in a 1 column set-up). Perhaps, if there is a way to programaticaly update that, this could all work much more easily than I anticipated.

I would really appreciate any ideas on how to work around that!