ui.select new_value_mode="add": set new value upon change of focus

[bmrast]

Question

Hi,

I have an ui.select object that allows user to set new values:

from nicegui import ui

options = ['Apple', 'Banana', 'Cherry']
ui.select(options=options, label='Choose a fruit', new_value_mode="add")

ui.run()

This requires the user to type the new value and press enter. However, to me it happens often that I forget to press enter before clicking anywhere else or pressing tab and I loose the newly entered value. That is why I am wondering if there is any way to accept new values not only by pressing enter but also upon clicking anywhere else or pressing tab (to switch to the next field)?

Thanks for your help!

[falkoschindler]

Hi @bmrast,

You could keep track of the input value and apply it when the focus gets lost:

options = ['Apple', 'Banana', 'Cherry']
state: dict[str, str] = {}
ui.select(options=options, label='Choose a fruit', new_value_mode="add") \
    .on('input-value', lambda e: state.update(value=e.args)) \
    .on('blur', lambda e: e.sender.set_value(state['value']))

[bmrast]

Hi @falkoschindler,

Thanks for the fast reply!

In my hands, your solution works fine for pressing the tab key, but not for mouse clicks. When I click somewhere, the ui.select field is cleared. I tried using 'update:model-value' and 'focusout' instead of 'blur', but I observed the same behavior for all these events. Is this to be expected?

[falkoschindler]

It's been a while, but I still can't find a solution that works in both cases. I would have expected it to work for mouse clicks as well. Does anyone else have an idea?