Weird behavior of select

[me21]

Description

Consider the following code:

@ui.page('/test', title='Test page')
async def setup_test_page():
    data = {'test_value': 'option 1'}
    async def open_dialog():
        with ui.dialog() as dialog, ui.card():
            ui.select(['option 1'], validation={'This field is required': bool}, new_value_mode='add-unique').bind_value(data, 'test_value')
            ui.button('OK', on_click=lambda: dialog.submit('OK'))
            ui.button('Cancel', on_click=lambda: dialog.submit('Cancel'))
        result = await dialog
        if result == 'Cancel':
            print('Resetting test_value to \'option 1\'.')
            data['test_value'] = 'option 1'

    ui.button('Open dialog', on_click=open_dialog)
    ui.timer(callback=lambda: print(f'Test value: {data["test_value"]}'), interval=1)

Maybe it can be minimized further, I'm not sure.

To reproduce, click on the button, then press Tab to focus on the select, enter "fizz" there, press Tab again, then Cancel. So far so good.
Now click on the button again, press Tab, enter "buzz", press Tab again. You will get a "This field is required" error. What's going on?

[falkoschindler]

Thanks for the report, @me21!
There's a "RecursionError: maximum recursion depth exceeded in comparison" somehow related to the binding module.
I bet we can reduce it further.

[me21]

Yes, I saw that exception from time to time, but could not reliably reproduce it.

[falkoschindler]

I noticed a few things while experimenting with this minimum example:

async def open_dialog():
    with ui.dialog() as dialog, ui.card():
        ui.select(['A'], new_value_mode='add').bind_value(data, 'value')
        ui.button('Close', on_click=lambda: dialog.submit(''))
    await dialog
    # dialog.clear()
    data['value'] = 'A'

data = {'value': 'A'}
ui.button(on_click=open_dialog).bind_text_from(data, 'value')

1. When calling open_dialog() again and again, there are multiple dialog instances created, each of which with a ui.select binding to the data dictionary. I suspect there is some unintentional interplay happening. Adding the line

   dialog.clear()

   after waiting the dialog seems to solve the problem, i.e. the value is correctly set back to "A" each time.

2. The weird interaction between two binding ui.select elements using new_value_mode can be reproduced with these lines:

   data = {'value': 'A'}
   ui.select(['A'], new_value_mode='add').bind_value(data, 'value')
   ui.select(['A'], new_value_mode='add').bind_value(data, 'value')

3. Actually calling dialog.delete() should work as well, but it doesn't. Here is another example demonstrating how the binding isn't removed after deleting the card:

   x = ui.label('X')
   with ui.card() as card:
       ui.label().bind_text_from(x)
   ui.button('Delete card', on_click=card.delete)
   ui.timer(1.0, lambda: print(len(binding.bindings)))

So I think point 1 needs to be addressed in user code, because NiceGUI can't know that it's a single-use dialog. Keeping multiple instances is not what you want, so you can delete it afterwards (or re-use it).

Points 2 and 3 need to be solved in the library - if possible. Cleaning up all bindings when deleting elements shouldn't be too hard. But solving the interaction of bindings with the new_value_mode could be tricky.

[falkoschindler]

We figured that point 2 is actually ok: When adding a new option, this option isn't synchronized with the other element, so the value is set to None over there. Because everything is bound, the None value is synchronized back to the first element.

Point 3, however, is even worse than thought. We don't seem to delete any children when calling delete() on an element:

with ui.card() as card:
    ui.timer(1.0, lambda: print('Hello, world!'))

ui.button('Delete card', on_click=card.delete)

The timer keeps running when deleting the card.

[me21]

Point 2 is ok but may be not immediately obvious. However, it seems to be a rare use case to bind two drop-down elements to the same variable, right?