monsterui Select not working when a switch or checkbox is present

[oegedijk]

Sorry to bother you again :) The mui.Select and fh.Select are still not equivalent when there is e.g. a switch or a checkbox present, the Select value is not passed with mui.Select but it is passed with fh.Select:

import monsterui.all as mui
from fasthtml.common import *

# app, rt = fast_app()

hdrs = mui.Theme.blue.headers()
app, rt = fast_app(hdrs=hdrs)


@rt("/")
def get_index():
    return Div(
        Form(
            CheckboxX(
                checked=True,
                label="Toggle",
                id="toggle",
                name="toggle",
                hx_get="/example",
                hx_target="#example-content",
                hx_swap="innerHTML",
                hx_include="#example_selector",
            ),
            mui.Select( # this does not work
                # Select( # this works
                Option("Option 1", value="1"),
                Option("Option 2", value="2"),
                Option("Option 3", value="3"),
                id="example_selector",
                hx_get="/example",
                hx_target="#example-content",
                hx_trigger="change",
                hx_swap="innerHTML",
                hx_include="#toggle",
                name="example_id",
            ),
            id="example-form",
        ),
        Div(id="example-content"),
    )


@rt("/example", methods=["GET"])
def get_example(example_id: str = "not selected", toggle: bool = False):
    return Div(
        f"Example content for option {example_id} and {toggle}",
    )


serve()

result with fh.Select:

result with mui.Select:

[Isaac-Flath]

Ok, I am going to take a closer look at this web component upstream and see if I can chat with FrankenUI. I wonder if I am using it wrong, or if an improvement can be made upstream to make it work a bit better with HTMX. I'll keep you updated when I figure out a better path.

[b0661]

Seems the hidden input field holding the selected value is never set.

Just another example. The following works with fh.Select but does not work with MonsterUI:

Button(
    "Import from file",
    hx_post="xxxxx",
    hx_target="#page-content",
    hx_swap="innerHTML",
    hx_vals='js:{ "import_file_name": document.querySelector("[name=\'selected_import_file_name\']").value }'
),
Select(
    *Options(*import_from_file_names),
    id="import_file_name",
    name="selected_import_file_name", # Name of hidden input field with selected value
),

[oegedijk]

Did you have a chance to have a look at this? My app looks a bit funny right now with everything themed with monsterUI except the select dropdown which is basic fh.Select...