multi_select somewhat usable

[masenf]

Try to address #1791, but this component is cursed.

Because of how the component expects to get certain props (options is a list of dict rather than child components, so rx.foreach cannot be used). It's not a great candidate for wrapping in reflex because Var operations have to compile down to frontend javascript and the transformations necessary to make the component ergonomic to use are not currently implemented.

And it looks like the component was contributed without tests or documentation, which makes it even harder to use, understand and catch behavioral regressions.

I have some small tweaks in this PR that make it actually possible to work with it, although it's not the nicest component and I'm not sure if/how it works with rx.form... Basically it needs some serious love and attention from someone who deeply understands reflex internals (and might even require some refactoring of rx.foreach to emit Var in addition to Component.)

Here is some sample code that can run with this PR

pip install git+https://github.com/reflex-dev/reflex@masenf/multi-select-somewhat-usable

import reflex as rx


class State(rx.State):
    allowed_options: list[str] = ["Foo", "bar", "baz", "qux", "quux", "corge", "grault"]
    
    @rx.var
    def multi_select_options(self) -> list[dict[str, str]]:
        return [
            {"label": o, "value": o}
            for o in self.allowed_options
        ]

    def handle_multi_select(self, values: list[str]):
        print(f"Selected: {values}")


def index() -> rx.Component:
    return rx.fragment(
        rx.color_mode_button(rx.color_mode_icon(), float="right"),
        rx.vstack(
            rx.heading("Welcome to Reflex!", font_size="2em"),
            rx.multi_select(
                #options=[
                #    rx.multi_select_option(label=o, value=o)
                #    for o in ["Foo", "bar", "baz", "qux", "quux", "corge", "grault"]
                #],
                options=State.multi_select_options,
                is_multi=True,
                on_change=State.handle_multi_select,
            ),
        ),
    )


app = rx.App()
app.add_page(index)
app.compile()

[masenf]

also needs

diff --git a/reflex/components/forms/multiselect.py b/reflex/components/forms/multiselect.py
index 9625e15..430418b 100644
--- a/reflex/components/forms/multiselect.py
+++ b/reflex/components/forms/multiselect.py
@@ -48,6 +48,7 @@ class Select(Component):
 
     library = "chakra-react-select"
     tag = "Select"
+    alias = "MultiSelect"
 
     # Focus the control when it is mounted
     auto_focus: Var[bool]

[picklelo]

works for me

[cyrus0880]

i use same code
but on ui click the select box is not any response

not show options

[topkek-issou]

Hi @masenf
Thanks for the fix, really useful!

Is there a way to populate it on the UI with a few selected options from the backend? Like with other components, we can use the value attribute to fill it with state vars.

So for example I have a select with Monday, Tuesday, ..., Sunday options.
And I'd like to use a state var to prefill the component with, say, State.defaults, which would be Tuesday and Thursday.

Thx!