Rich multiselect

[zxwild]

Is it possible to have a multiselect in bootstrap-vue? (I think I could implement it for the bootstrap-vue, I hope).

I mean a multiselect which doesn't use select/option HTML tag, to have an ability for customization. Usually it's required to have: select all/none, search, tags, custom selectors inside drop-down area (for example a map to select a country), title/value displaying in an option item, treeview etc.

I'm asking since I already did it a few times in my projects, since it's a very commonly used thing, which usually is missing in libs. But maybe it's against "clean bootstrap" ideology?

It's definitely a very customized HTML widget to display all of this. I have some experience in building multiselects and have a desire to contribute, is it possible to inlude such thing?

[xvaara]

You mean something like https://vue-select.org/ ? or like: https://preview.colorlib.com/theme/bootstrap/multiselect-01/ It needs to be customisable via slots, aria labeled, keyboard navigable, etc.

treeview might be a good component on it's own.

We could maybe reuse some of dropdown for this. I've been thinking the about this for a while also :smile:.

[zxwild]

You mean something like https://vue-select.org/ ? or like: https://preview.colorlib.com/theme/bootstrap/multiselect-01/

Yes, it's the thing which is required everywhere and I have to reimplement it in every project...

Ok, if it's not a problem to have something more complex than a plain bootstrap look&feel I'll try to implement a demo and send a pull request :)

I have some experience in multiselects, so my main trouble is to align it with existing code style :)

[makroxyz]

I'm using https://vue-multiselect.js.org/ it's a good component

[zxwild]

I'm using https://vue-multiselect.js.org/ it's a good component

I always met the trouble with styling difference when a few libs are used. Usually it's needed to apply hacks on top of the existing CSS to align inputs each other.

[makroxyz]

I'm using https://vue-multiselect.js.org/ it's a good component

I always met the trouble with styling difference when a few libs are used. Usually it's needed to apply hacks on top of the existing CSS to align inputs each other.

Same for me... styling is always a trouble.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. Either remove stale label or comment, otherwise this will be closed in 90 days

[VividLemon]

Its difficult to come up with an answer, as creating custom functionality would require dedication to maintain that component... To keep it compatible with Bootstraps css. RTL, color modes, etc. This is an issue with all custom components. However, I have no strong opinions one way or the other, as the fact of the matter is there are custom components. The issue that I have is that I'm not going to be the one to make that enhancement

[xvaara]

@VividLemon I got tired of waiting, so I did a test using only using bootstrap classes and css variables: https://stackblitz.com/edit/github-65w77s?file=src%2FApp.vue

Would this be acceptable way of a light component. this of course doesn't have all the features, it's just a ui test.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. Either remove stale label or comment, otherwise this will be closed in 90 days

[dword-design-honestly]

Wanted to bump into this and also second that I would love a rich multiselect component. We are using vue-select right now but it has some issues and doesn't seem to be that actively maintained while vue-multiselect feels pretty good.

[VividLemon]

Wanted to bump into this and also second that I would love a rich multiselect component. We are using vue-select right now but it has some issues and doesn't seem to be that actively maintained while vue-multiselect feels pretty good.

I likely wont add it anytime soon

Someone else can idrc

[xvaara]

@dword-design-honestly does my ui test above meet your needs? I really would not want to add all the features from those quite complex multiselects. (Don't want another BTable here)

So can you define what it would need to do?

[dword-design-honestly]

@xvaara Looks like the right direction. 2 things I had in mind was

• Make sure that the search does not interfere or overflow with the selected tags
  • vue-multiselect shows it on dropdown open and does a line break
  • PrimeVue shows a dedicated input in the dropdown
• Do not show all tags, so some kind of "x items selected" or "+ x more"
• Custom search event for API calls (see vue-select)

I guess that would be a good start. Thanks already for the proposal!

[xvaara]

I don't like the fact that vue-multiselect makes the content below jump when opening, that's a big no for me. I really don't like "x items selected" since it doesn't seem useful, compared to list of selected values.
You can always customize these with the slots if we implement these.

Using events for search seem overly complex, why not just add a search function prop that can call api / whatever and return the results?

[dword-design-honestly]

How would you render a very large selection list? The parent component would grow endlessly ^^. If there are slots I'm fine with it.

prop instead of event for search is fine for me.