Leaking click handlers on buttons?

[marcin-koziol]

Description

In this example, the red button should not trigger timer.open(), but it does

from nicegui import ui

with ui.menu() as timer:
    ui.time(value='08:00')
ui.button('', on_click=timer.open).props('icon=calendar_month')

with ui.menu() as timer:
    ui.time(value='16:00')
ui.button('', on_click=timer.open).props('icon=calendar_month')
ui.button('', on_click=lambda: ui.notify("CLICK"), color='negative').props('icon=delete')

ui.run(title='lol 2137', dark=None, show=False)

This one works as expected:

from nicegui import ui

with ui.card():
    with ui.menu() as timer:
        ui.time(value='08:00')
    ui.button('', on_click=timer.open).props('icon=calendar_month')

    with ui.menu() as timer:
        ui.time(value='16:00')
    ui.button('', on_click=timer.open).props('icon=calendar_month')
ui.button('', on_click=lambda: ui.notify("CLICK"), color='negative').props('icon=delete')

ui.run(title='lol 2137', dark=None, show=False)

[falkoschindler]

The intended way would be do nest menus in buttons:

with ui.button().props('icon=calendar_month'):
    with ui.menu() as timer:
        ui.time(value='08:00')

with ui.button().props('icon=calendar_month'):
    with ui.menu() as timer:
        ui.time(value='16:00')

ui.button(on_click=lambda: ui.notify('CLICK'), color='negative').props('icon=delete')

This is because Quasar's QMenu component opens when clicking on its parent container element by default. This is why the menus in your first example also open when clicking on the background. This behavior can be disabled setting the "no-parent-event" prop. In earlier NiceGUI versions this prop was set by default, but in 1.3.0 we decided to switch to Quasar's default. See #713 for more details.