reflex
reflex copied to clipboard
Dropdown menu doesn't work with fallback avatar
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:
And here you can see when clicked on the avatar with the fallback text does not show the drop down menu:
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.