Popovers don’t work when the trigger is an rx.avatar and doesn’t have a valid URL in the src.

[juandaherrera]

Describe the bug I have some code to show users a popover when they click on their profile photo. Sometimes this photo has a URL that doesn’t exist or becomes inaccessible due to multiple requests. In those cases, there's a fallback that displays the first initial of the user’s name. However, when this fallback is triggered, the popover stops working.

To Reproduce Steps to reproduce the behavior:

import reflex as rx

from .. import styles
from ..backend.states import ProfileState

def _avatar() -> rx.Component:
    return rx.popover.root(
        rx.popover.trigger(
            rx.avatar(
                src=ProfileState.profile.picture,
                fallback=ProfileState.profile.name[0],
                size="2.5em",
                margin_left="auto",
                _hover={
                    "cursor": "pointer",
                    "filter": "brightness(0.8)",
                },
            ),
        ),
        rx.popover.content(
            rx.vstack(
                rx.data_list.root(
                    rx.data_list.item(
                        rx.data_list.label("Name"),
                        rx.data_list.value(ProfileState.profile.name),
                    ),
                    rx.data_list.item(
                        rx.data_list.label("Email"),
                        rx.data_list.value(ProfileState.profile.email),
                    ),
                    rx.data_list.item(
                        rx.data_list.label("Session Exp. Date"),
                        rx.data_list.value(ProfileState.session_exp_date),
                    ),
                ),
                rx.button(
                    "Sign out",
                    on_click=ProfileState.logout,
                    color_scheme="red",
                    variant="outline",
                    width="100%",
                    _hover={"cursor": "pointer"},
                ),
                align="center",
                spacing="5",
            ),
        ),
        size="1",
    )

Expected behavior The popover should appear regardless of whether the image loads or the fallback is displayed.

Screenshots This is when the image url works fine:

https://github.com/user-attachments/assets/a088437c-9062-461d-b1ce-0a93a5fd525b

This is when the fallback is called:

https://github.com/user-attachments/assets/78325fa8-0c36-483e-96fe-53e03d2717d8

Specifics (please complete the following information):

• Python Version: 3.12.3
• Reflex Version: 0.6.4
• OS: MacOS
• Browser (Optional): Google Chrome

Additional context N/A

[linear[bot]]

ENG-4027 Popovers don’t work when the trigger is an rx.image and doesn’t have a valid URL in the src.

[adhami3310]

as a workaround, put the avatar inside of a box or something similar