Repository: h2oai/wave
File: py/examples/combobox.py (Python)

Code before:
# Form / Combobox
# Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing.
# #form #combobox
# ---
from h2o_wave import main, app, Q, ui

combobox_choices = ['Cyan', 'Magenta', 'Yellow', 'Black']


@app('/demo')
async def serve(q: Q):
    if q.args.show_inputs:
        q.page['example'].items = [
            ui.text(f'combobox={q.args.combobox}'),
            ui.text(f'combobox_required={q.args.combobox_required}'),
            ui.text(f'combobox_disabled={q.args.combobox_disabled}'),
            ui.text(f'combobox_error={q.args.combobox_error}'),
            ui.text(f'combobox_multivalued={q.args.combobox_multivalued}'),
            ui.button(name='show_form', label='Back', primary=True),
        ]
    else:
        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
            ui.combobox(name='combobox', label='Enter or choose a color', placeholder='Color...', value='Black',
                        choices=combobox_choices),
            ui.combobox(name='combobox_required', label='Enter or choose a color', placeholder='Color...', value='Black',
                        choices=combobox_choices, required=True),
            ui.combobox(name='combobox_disabled', label='Enter or choose a color', placeholder='Color...', value='Black',
                        choices=combobox_choices, disabled=True),
            ui.combobox(name='combobox_error', label='Enter or choose a color', placeholder='Color...', value='Black',
                        choices=combobox_choices, error='This combobox has an error!'),
            ui.combobox(name='combobox_multivalued', label='Enter or choose a color (multi select)', placeholder='Color...', values=['Black', 'Magenta'],
                        choices=combobox_choices),
            ui.button(name='show_inputs', label='Submit', primary=True),
        ])
    await q.page.save()


Review comment (suggestion):
This is by design. Since combobox let's you select either predefined options or free text, the value should be able to display arbitrary text that is not among the options also. Please revert this and implement the previous behavior and add the unit test for it so we have it covered for the future.

Code after:
# Form / Combobox
# Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing.
# #form #combobox
# ---
from h2o_wave import main, app, Q, ui

combobox_choices = ['Cyan', 'Magenta', 'Yellow', 'Black']


@app('/demo')
async def serve(q: Q):
    if q.args.show_inputs:
        q.page['example'].items = [
            ui.text(f'combobox={q.args.combobox}'),
            ui.text(f'combobox_required={q.args.combobox_required}'),
            ui.text(f'combobox_disabled={q.args.combobox_disabled}'),
            ui.text(f'combobox_error={q.args.combobox_error}'),
            ui.text(f'combobox_multivalued={q.args.combobox_multivalued}'),
            ui.button(name='show_form', label='Back', primary=True),
        ]
    else:
        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
            ui.combobox(name='combobox', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices),
            ui.combobox(name='combobox_required', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices, required=True),
            ui.combobox(name='combobox_disabled', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices, disabled=True),
            ui.combobox(name='combobox_error', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices, error='This combobox has an error!'),
            ui.combobox(name='combobox_multivalued', label='Enter or choose a color (multi select)', placeholder='Color...', values=['Blue', 'Magenta'],
                        choices=combobox_choices),
            ui.button(name='show_inputs', label='Submit', primary=True),
        ])
    await q.page.save()