Enhance mo.ui.multiselect

[Yasin197]

Describe the bug

using the mo.ui.multiselect widget it is hard to keep track of all the elements which was selected especially if the dropdown is long.

1. Typically, you should have a list just above the dropdown which contains all the elements which was selected (maybe slightly different highlighting too)

2. when you hover over the widget, it should also show you which elements which was selected.

with these enhancements it should improve the UX greatly!

Will you submit a PR?

• [ ] Yes

Environment

Replace this line with the output of marimo env. Leave the backticks in place.

Code to reproduce

No response

[Yasin197]

@mscolnick @Light2Dark - wdyt?

[mscolnick]

hey @Yasin197 these ideas sound good to implement. would you like to add the feature yourself?

[Yasin197]

unfortunately i won't be able to as i am not good with the front-end codebase. I raised this feature enhancement because this is the behavior we have in our in house strategic applications in our UIs which is a "must have" for greater adoption

[mscolnick]

@Yasin197, you can do this yourself currently today, here is some pseudo-code:

# cell 1
selection = mo.ui.multi_select(options)

# cell 2
mo.md(f"""
{str(selection.value)}

{selection}
""")

[Yasin197]

@mscolnick yes - i have something like this already as a work around, do you think this feature would make it into a release in the future?

[mscolnick]

@Yasin197 - i think it could. most definitely with a community contribution.

[yan-hic]

@mscolnick I agree multiselect could support "combo-style" ie. like multi feature of https://react-select.com/home, where user can see and deselect easily the selected entries instead of a generic "# selected". As per OP, if the list is long, it's cumbersome to scroll and remember which entries are selected. Another cell can show the values, but doesn't help with deselecting.

Could be either an enhancement to multiple or a new UI component. Am not a ts/js developer but as workaround, can react-select be wrapped in an anywidget ?