Dropdown value clearing

[ShehanIshanka]

Wave SDK Version, OS

0.21.1

Actual behavior

I have two dropdowns and I need to clear the selected value of the second dropdown when the value of the first dropdown changes.

This works fine with form by setting the second dropdown value as None.

from h2o_wave import app, main, Q, ui


@app("/")
async def serve(q: Q) -> None:
    if q.args.dropdown1:
        if q.args.dropdown1 != q.client.dropdown1:
            q.client.dropdown1_changed = True
        else:
            q.client.dropdown1_changed = False
        q.client.dropdown1 = q.args.dropdown1
    if q.args.dropdown2:
        if q.client.dropdown1_changed:
            q.client.dropdown2 = None
        else:
            q.client.dropdown2 = q.args.dropdown2

    q.page["example"] = ui.form_card(
        box="1 1 2 2",
        items=[
            ui.dropdown(
                name="dropdown1",
                label="Dropdown1",
                value=q.client.dropdown1,
                trigger=True,
                choices=[
                    ui.choice(name="1", label="Choice 1"),
                    ui.choice(name="2", label="Choice 2"),
                    ui.choice(name="3", label="Choice 3"),
                ],
            ),
            ui.dropdown(
                name="dropdown2",
                label="Dropdown2",
                value=q.client.dropdown2,
                trigger=True,
                choices=[
                    ui.choice(name="a", label="Choice a"),
                    ui.choice(name="b", label="Choice b"),
                    ui.choice(name="c", label="Choice c"),
                ],
            ),
        ],
    )

    await q.page.save()

Screen.Recording.2022-08-05.at.20.59.53.mov

When the dropdowns are in a side panel, you need to set the value of the second dropdown as a value except None.

Scenario 1: Value as None - Not working.

from h2o_wave import app, main, Q, ui

@app("/")
async def serve(q: Q) -> None:
    if not q.client.initialized:
        q.page['meta'] = ui.meta_card(box='')
        q.page['example'] = ui.form_card(box='1 1 2 1', items=[
            ui.button(name='show_side_panel', label='Open side panel', primary=True)
        ])
        q.client.initialized = True
    else:
        if q.args.show_side_panel:
            show_side_panel(q)

        if q.args.dropdown1:
            if q.args.dropdown1 != q.client.dropdown1:
                q.client.dropdown2 = None
            q.client.dropdown1 = q.args.dropdown1
            show_side_panel(q)
        if q.args.dropdown2:
            q.client.dropdown2 = q.args.dropdown2
            show_side_panel(q)
        if q.args.cancel:
            q.page['meta'].side_panel = None
            q.client.dropdown1 = None
            q.client.dropdown2 = None

    await q.page.save()


def show_side_panel(q):
    q.page["meta"].side_panel = ui.side_panel(
        title="Side Panel",
        items=[
            ui.dropdown(
                name="dropdown1",
                label="Dropdown1",
                value=q.client.dropdown1,
                trigger=True,
                choices=[
                    ui.choice(name="1", label="Choice 1"),
                    ui.choice(name="2", label="Choice 2"),
                    ui.choice(name="3", label="Choice 3"),
                ],
            ),
            ui.dropdown(
                name="dropdown2",
                label="Dropdown2",
                value=q.client.dropdown2,
                trigger=True,
                choices=[
                    ui.choice(name="a", label="Choice a"),
                    ui.choice(name="b", label="Choice b"),
                    ui.choice(name="c", label="Choice c"),
                ],
            ),
            ui.button(name='cancel', label='Cancel')
        ],
        events=["dismissed"],
        closable=True,
    )

Screen.Recording.2022-08-05.at.21.04.41.mov

Scenario 2: Value as an empty string - working.

from h2o_wave import app, main, Q, ui

@app("/")
async def serve(q: Q) -> None:
    if not q.client.initialized:
        q.page['meta'] = ui.meta_card(box='')
        q.page['example'] = ui.form_card(box='1 1 2 1', items=[
            ui.button(name='show_side_panel', label='Open side panel', primary=True)
        ])
        q.client.initialized = True
    else:
        if q.args.show_side_panel:
            show_side_panel(q)

        if q.args.dropdown1:
            if q.args.dropdown1 != q.client.dropdown1:
                q.client.dropdown2 = ""
            q.client.dropdown1 = q.args.dropdown1
            show_side_panel(q)
        if q.args.dropdown2:
            q.client.dropdown2 = q.args.dropdown2
            show_side_panel(q)
        if q.args.cancel:
            q.page['meta'].side_panel = None
            q.client.dropdown1 = None
            q.client.dropdown2 = None

    await q.page.save()


def show_side_panel(q):
    q.page["meta"].side_panel = ui.side_panel(
        title="Side Panel",
        items=[
            ui.dropdown(
                name="dropdown1",
                label="Dropdown1",
                value=q.client.dropdown1,
                trigger=True,
                choices=[
                    ui.choice(name="1", label="Choice 1"),
                    ui.choice(name="2", label="Choice 2"),
                    ui.choice(name="3", label="Choice 3"),
                ],
            ),
            ui.dropdown(
                name="dropdown2",
                label="Dropdown2",
                value=q.client.dropdown2,
                trigger=True,
                choices=[
                    ui.choice(name="a", label="Choice a"),
                    ui.choice(name="b", label="Choice b"),
                    ui.choice(name="c", label="Choice c"),
                ],
            ),
            ui.button(name='cancel', label='Cancel')
        ],
        events=["dismissed"],
        closable=True,
    )

Screen.Recording.2022-08-05.at.21.06.07.mov

Expected behavior

Expect to clear the value of a dropdown in a side panel, when it is set as None.

[aalencar]

Related to #1154.