Dropdown menus not working as expected

[codeananda]

I have created pages input and output. I want to select the input from the dropdown menu and render it as text in the output page. This does not work very well.

If I do not set an initial ui.dropdown(value=???), input remains blank even if I select items. If I select items, they are successfully rendered in ouput. Here we see 'max' is displayed.

Desired behavior: input should be displayed when I select it.

The following info is linked to #1154 but I've added extra picture explanations (since what is displayed by the dropdown is also incorrect)

If I set ui.dropdown(value='median') it initially displays input as Median and output as 'Nothing to render'.

Desired behavior: Initial values of input and output should correspond to the value set in ui.dropdown(value='median')

If I select 'median', it doesn't change output.

If I select an element that is not median - i.e. not the initial value - input continues to display Median and output successfully displays the selected element. If I then select 'median', input continues to display Median and output remains whatever it was before.

Desired behavior: input and output should update simultaneously. Selecting the initial value should update output the same as selecting elements that are not the initial value.

Code to reproduce behaviour

@app("/demo")
async def serve(q: Q):

    # Display dropdown menu
    q.page["input"] = ui.form_card(
        box="1 1 2 2",
        items=[
            ui.dropdown(
                name="agg_stat",
                label="Input",
                value="median", # comment this out to see different behaviour
                trigger=True,
                choices=[
                    ui.choice(name="median", label="Median"),
                    ui.choice(name="mean", label="Mean"),
                    ui.choice(name="max", label="Max"),
                ],
            )
        ],
    )

    q.page["output"] = ui.frame_card(
        box="1 2 2 2", title="Output", content=q.args.agg_stat
    )

    await q.page.save()

I am using wave version 0.20.0 on Mac with Anaconda install

[aalencar]

By setting trigger you push the changes to the server on every selection and your code is recreating the card with the same value.

Try this instead:

@app("/demo")
async def serve(q: Q):

    # Display dropdown menu
    q.page["input"] = ui.form_card(
        box="1 1 2 2",
        items=[
            ui.dropdown(
                name="agg_stat",
                label="Input",
                value=q.args.agg_stat or "median",  # check for the new value
                trigger=True,
                choices=[
                    ui.choice(name="median", label="Median"),
                    ui.choice(name="mean", label="Mean"),
                    ui.choice(name="max", label="Max"),
                ],
            )
        ],
    )

    q.page["output"] = ui.frame_card(
        box="1 2 2 2", title="Output", content=q.args.agg_stat or "median"
    )

    await q.page.save()

[mturoci]

Or even better, update instead of recreate:

@app("/demo")
async def serve(q: Q):
    # Create the cards only once.
    if not q.client.initialized:
        q.page["input"] = ui.form_card(
            box="1 1 2 2",
            items=[
                ui.dropdown(
                    name="agg_stat",
                    label="Input",
                    value="median",  # set default value
                    trigger=True,
                    choices=[
                        ui.choice(name="median", label="Median"),
                        ui.choice(name="mean", label="Mean"),
                        ui.choice(name="max", label="Max"),
                    ],
                )
            ],
        )
        q.page["output"] = ui.frame_card(
            box="1 2 2 2", title="Output", content="median"
        )
        q.client.initialized = True

    # Do not recreate, just update if dropdown val changed.
    if q.args.agg_stat:
        q.page['output'].content = q.args.agg_stat

    await q.page.save()

[codeananda]

update instead of recreate

This is exactly what I was looking for! Got confused with all the name params in ui.form_card...