Choices of the Dropdown is not be updated immediately, when it is on a side panel.

[Sivakajan-tech]

Wave SDK Version, OS

Wave SDK: 0.24.2, OS: MacOs

Actual behavior

When using the Dropdown in the side_panel, the list of choices is not updated immediately. But when we close the side_panel and again open the dropdown it updated correctly.

Screen.Recording.2023-02-27.at.08.21.35.mov

Expected behaviour

In the Dropdown, The list of choices should be updated after adding.

Steps To Reproduce

from h2o_wave import main, app, Q, ui, on, handle_on

choices = [
    {'name': 'Name 1', 'label': 'Label 1', 'isSelected': False},
    {'name': 'Name 2', 'label': 'Label 2', 'isSelected': False},
    {'name': 'Name 3', 'label': 'Label 3', 'isSelected': False},
    {'name': 'Name 4', 'label': 'Label 4', 'isSelected': False},
    {'name': 'Name 5', 'label': 'Label 5', 'isSelected': False},
]

@on()
async def add_choice_button(q: Q):
    if q.args.select_choice_dropdown:
        for x in q.args.select_choice_dropdown:
            for choice in choices:
                if choice['name'] == x:
                    choice['isSelected'] = True

def dropdown_window(q: Q):
    itemList = [
        ui.dropdown(
            name="select_choice_dropdown",
            label="Share with",
            placeholder="Select Choice",
            choices=[ui.choice(name=choice['name'], label=choice['label']) for choice in choices if
                     not choice['isSelected']],
            values=[],
            popup=ui.DropdownPopup.ALWAYS
        ),
        ui.button(
            name="add_choice_button",
            label="Add Choice",
            primary=True
        ),
    ]
    return itemList


def content_sidepanel(q: Q):
    items = [
        ui.template(content=" "),
        ui.inline(
            items=dropdown_window(q),
            justify=ui.InlineJustify.BETWEEN,
        ),
    ]
    for x in choices:
        if x['isSelected']:
            items.extend([ui.persona(title=x['label'], size="xs")])

    return items


@app('/demo')
async def serve(q: Q):
    await handle_on(q)

    if not q.client.initialized:
        q.page['meta'] = ui.meta_card(box='')
        q.page['side_panel_button'] = ui.form_card(box='1 1 2 1', items=[
            ui.button(name='show_side_panel', label='Show Side Panel')
        ])
        q.client.initialized = True
    else:
        if q.args.show_side_panel or q.args.add_choice_button:
            q.page['meta'].side_panel = ui.side_panel(
                title="Dropdown Issue",
                closable=True,
                blocking=True,
                items=content_sidepanel(q)
            )
    await q.page.save()

[mturoci]

The code above tries to recreate the entire side_panel content by clicking the add_choice_button. This is currently not working and is tracked in #1734.

A better solution though would be to update just choices of the dropdown since that's the only thing that changes anyway:

from h2o_wave import main, app, Q, ui

choices = [
    ui.choice('A', 'Option A'),
    ui.choice('B', 'Option B'),
    ui.choice('C', 'Option C', disabled=True),
    ui.choice('D', 'Option D'),
]

choices2 = [
    ui.choice('E', 'Option E'),
    ui.choice('F', 'Option F'),
    ui.choice('G', 'Option G', disabled=True),
    ui.choice('H', 'Option H'),
]


@app('/')
async def serve(q: Q):
    if not q.client.initialized:
        q.page['form'] = ui.form_card(box='1 1 4 4', items=[
            ui.dropdown(name='dropdown', label='Dropdown', choices=choices),
            ui.button(name='change', label='Change'),
            ui.button(name='open_side_panel', label='Open side panel'),
        ])
        q.client.initialized = True

    if q.args.change:
        q.page['form'].items[0].dropdown.choices = choices2
    elif q.args.panel_change:
        q.page['meta'].side_panel.items[0].dropdown.choices = choices2
    elif q.args.open_side_panel:
        q.page['meta'] = ui.meta_card(box='', side_panel=ui.side_panel(title='Side panel', items=[
            ui.dropdown(name='panel_dropdown', label='Dropdown', choices=choices),
            ui.button(name='panel_change', label='Change'),
        ]))

    await q.page.save()