I’m using Justpy v0.14 and I’m trying to implement a very simple pop-up menu. There is a button, when clicked a pop-up shows up. The pop-up should be closed when a user clicks somewhere outside the pop-up area.

Any idea how to do it?

I tried this:

import justpy as jp

def home_page(request):
    wp = jp.WebPage()

    userButton = jp.Button(type='button', aria_expanded='false', aria_haspopup='true', text="user", a=wp)
    userMenu = jp.Div(classes='absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none invisible', role='menu', aria_orientation='vertical', aria_labelledby='user-menu-button', tabindex='-1', a=wp)
    p1 = jp.Div(a=userMenu, text="Option 1")
    userMenu.isVisible = False
    
    userButton.userMenu = userMenu

    def userMenuClick_out(self, msg):
        if userMenu.isVisible:
            userMenu.set_class('invisible')
            userMenu.isVisible = False

    def toggleUserMenu(self, msg):
        if self.userMenu.isVisible:
            self.userMenu.set_class('invisible')
            self.userMenu.isVisible = False
        else:
            self.userMenu.set_class('visible')
            self.userMenu.isVisible = True

    userMenu.on('click__out', userMenuClick_out)
    userButton.on('click', toggleUserMenu)
    
    return wp

jp.justpy(home_page)

However the ‘click__out’ event is triggered also when the user clicks the button so the result is that the pop-up is closed immediately after being opened.

I tried to move assigning the event handler for ‘click__out’ to the event handler of the button click hoping it will be assigned dynamically. But this doesn’t seem to work.