Select element behavior with with_input=True

[parlance-zz]

Description

Hello,

The default behavior for the select element clears any user entered text when the element is defocused. The new-value-mode behaviors aren't particularly helpful because they require explicitly using the enter key which isn't necessarily intuitive, and it is unlikely that either the add or add-unique new-value-mode options cover the use cases most developers would want.

In my case I'm using the select element to list saved presets with buttons to load or save them, and it would be ideal if the user could type the preset name into the preset select element and click the save button (or make additional changes / interact with the rest of the UI and then click save). The new / ephemeral value is only removed when selecting a different option in the select element.

My desired behavior is shown here in the "Text autocomplete" example: https://quasar.dev/vue-components/select/#example--text-autocomplete

The following code is a functional workaround, but it's a bit messy and I think my desired functionality is a common enough use case to justify including it in the library.

from nicegui import ui

select_options = ["Google", "Facebook", "Twitter", "Apple", "Oracle"]

with ui.row():
    select_element = ui.select(
        options=select_options,
        label="Type or select an option",
        value="Google",
        with_input=True,
    )

select_val = "Google"
def on_input_value(val):
    print("filter", f"'{val}'")
    global select_val
    select_val = val

def on_blur(e):
    print("blur", "select_val:", select_val, "select_element.value:", select_element.value)  
    if select_val != "" and select_val not in select_options:
        select_element.options = select_options + [select_val]
        select_element.set_value(select_val)

def on_value_change(val):
    print("value_change", val)
    if val in select_options:
        select_element.set_options(select_options)

select_element.on("input-value", lambda e: on_input_value(e.args))
select_element.on("blur", lambda e: on_blur(e))
select_element.on_value_change(lambda e: on_value_change(e.value))

ui.run()

[falkoschindler]

Hi @parlance-zz,

So you're trying to add a new value on blur and not only on enter. This doesn't seem to be Quasar's default behavior. You're referring to the Text autocomplete example. But this doesn't allow to enter new values, which makes it hard to compare. Quasar's New value mode examples behave more like NiceGUI's current implementation.

Since ui.select is already pretty complex, I'm hesitant to add yet another option like "add_new_value_on_blur". I wonder if it should actually be an upstream feature request for Quasar?

[parlance-zz]

Hi @falkoschindler,

Thanks for taking the time to reply. I'm not necessarily interested in having the value directly added to the options on blur, what I want is the ability to disable the behavior of erasing the user input and instantly reverting back to an existing option on blur. Here's a post asking for the same thing in quasar: quasarframework/quasar#12744

I understand the desire to keep default functionality consistent with the behavior of the existing quasar elements they are based on. I'm satisfied with my workaround if you'd prefer not to make any changes.

Thanks again for taking the time to reply and thank you for the excellent work on the library.

[sght500]

Thank You for the Workaround! 🙌

First of all, I’d like to thank the NiceGUI team and specially @parlance-zz for the provided code example in this discussion. It really works as a great workaround for managing dynamic options with user input. 🎉

After some experimentation, I simplified the code a bit, and I wanted to share the changes that I made to streamline it. Here’s the updated version:

Simplified Code:

from nicegui import ui
import asyncio

select_options = ["Google", "Facebook", "Twitter", "Apple", "Oracle"]
select_val = ""

def on_input_value(val):
    global select_val
    select_val = val

def on_blur():
    if select_val not in select_options:
        select_element.options = select_options + [select_val]
        select_element.set_value(select_val)
        print("set_value:", select_val)

async def ui_search_stream():
    with channel_row:
        ui.label(select_element.value)

with ui.row().style('width: 100%;'):
    select_element = ui.select(
        options=select_options,
        label="Type or select an option",
        with_input=True,
    ).style('width: 63%;')
    select_element.on("input-value", lambda e: on_input_value(e.args))
    select_element.on("blur", lambda: on_blur())

    ui.button('Search', on_click=lambda: asyncio.create_task(ui_search_stream())).style('width: 16%;')

channel_row = ui.row()
ui.run()

Key Changes Made:

1. Removed on_value_change():
   The on_value_change function was not adding any relevant functionality, so I removed it for simplicity.

2. No event parameter in on_blur():
   Since the event object was not needed inside on_blur(), I removed the event parameter to avoid unnecessary code.

3. Removed the select_val != "" condition:
   This condition was removed to avoid unintended selection of an empty string as a valid option. The logic now focuses on checking whether the user’s input already exists in the options list.

Next Steps:

I’ll be using this version to implement the requested functionality in the xtreamPOC project as part of this issue.

Feel free to check out xtreamPOC, which leverages both NiceGUI and pyxtream, at https://github.com/sght500/xtreamPOC. I’d love to hear your feedback on it and see if there are further improvements we can collaborate on.

Thanks again for your great work! 🚀

Best regards,
@sght500