reflex icon indicating copy to clipboard operation
reflex copied to clipboard

Dropdown menu doesn't work with fallback avatar

Open bertbarabas opened this issue 1 year ago β€’ 0 comments

Describe the bug A dropdown menu with an Avatar as the trigger works only if the Avatar was given a proper image and the fallback was not used. If the fallback is used, the dropdown menu no longer responds to being clicked on.

To Reproduce Steps to reproduce the behavior:

def extract_initials_from_email(email):
    name = email.split("@")[0]
    initials = "".join(c[0] for c in name.split(".") if c.isalpha())
    return initials[:2].upper()


def account_drop_down() -> rx.Component:
    email = "[email protected]"
    initials = extract_initials_from_email(email)
    g = Gravatar(email)
    img = g.get_image(default="404")
    avatar = rx.avatar(src=img, fallback=initials, radius="full")

    return rx.menu.root(
        rx.menu.trigger(avatar),
        rx.menu.content(
            rx.menu.separator(),
            rx.menu.item("Logout", color="red", on_click=rx.console_log(img)),
        ),
        position="fixed",
        right="1.5em",
        top="1.5em",
    )

Expected behavior The dropdown should appear regardless if the avatar has an image or if it has the fallback text

Screenshots Here you can see clicking on the avatar brings up the drop down menu: image

And here you can see when clicked on the avatar with the fallback text does not show the drop down menu: image

Specifics (please complete the following information):

  • Python Version: 3.12.1
  • Reflex Version: 0.4.3
  • OS: OS: WSL on Windows 11 (Ubuntu 22.04.4 LTS (GNU/Linux 5.15.133.1-microsoft-standard-WSL2 x86_64)
  • Browser (Optional):

Additional context Add any other context about the problem here.

bertbarabas avatar Mar 09 '24 19:03 bertbarabas