Async callback in Element.on() can lead to IndexError in slot stack

[falkoschindler]

Discussed in #280

Here is a minimal reproduction. The first button works as expected, the second one doesn't.

async def handle_click():
    await asyncio.sleep(0.1)
    ui.notify('clicked')

ui.button('Works', on_click=handle_click)
ui.button('Fails').on('click', handle_click)

• support async callbacks in Element.on()
• while we are here: make Element available as ui.element

[SebastienDorgan]

Hi @falkoschindler,
As I really wanted this to work I have created a simple work around that is, I hope, interesting to share

import asyncio
from nicegui import ui, Client
from nicegui.events import ClickEventArguments, handle_event
@ui.page('/')
async def main_page(client: Client):
    async def handle_click():
        await asyncio.sleep(0.1)
        ui.notify('clicked')

    ui.button('Works', on_click=handle_click)
    button = ui.button("Works with effort")
    button.on("click", lambda _: handle_event(handle_click, ClickEventArguments(sender=button, client=button.client)))
    ui.button('Fails').on('click', lambda _: handle_click())

ui.run(show=False)

[falkoschindler]

Thanks for sharing, @SebastienDorgan! That's a great workaround.

And that's basically what needs to be done to fix .on() in NiceGUI. We just have to check where to put the additional call to handle_event so that "normal" event handlers like on_click don't call it twice internally. So we probably have to move the handle_event call out of UI elements like button and into .on() in the element base class.

[falkoschindler]

I created PR #305 which should solve this issue.

[rodja]

I've just merged the code.