Some Components don't Prevent Click Events From Bubbling

[mad-moo]

Describe the bug

Components are supposed to block events once they have been handled, but that isn't the case for all of them. Sample code (by @heizidi on discord):

Steps to Reproduce

class MyRoot(rio.Component):
    def build(self) -> rio.Component:
        return rio.PointerEventListener(
            rio.Column(
                align_y=0,
                align_x=0,
                spacing=1,
                margin=1,
                *[
                    # well-behaved, do not propagate on_press
                    rio.TextInput(),
                    rio.Button(),
                    rio.DateInput(value=date.today()),
                    rio.NumberInput(value=42),
                    rio.Switch(),
                    # Naughty, propagate on_press
                    rio.Checkbox(),
                    rio.Slider(),
                    rio.Dropdown(options=["Option 1", "Option 2", "Option 3"]),
                ],
            ),
            on_press=lambda e: print("Naughty propagator clicked!"),
        )

Screenshots/Videos

No response

Operating System

No response

What browsers are you seeing the problem on?

No response

Browser version

No response

What device are you using?

No response

Additional context

No response

[HeiziND]

Thanks for filing this one @mad-moo, just adding a couple more propagators that I recently found: Card and PointerEventListener

class MyRoot(rio.Component):
    def build(self) -> rio.Component:
        return rio.PointerEventListener(
            rio.Column(
                align_y=0,
                align_x=0,
                spacing=1,
                margin=1,
                *[
                    # well-behaved, do not propagate on_press
                    rio.TextInput(),
                    rio.Button(),
                    rio.DateInput(value=date.today()),
                    rio.NumberInput(value=42),
                    rio.Switch(),
                    # Naughty, propagate on_press
                    rio.Checkbox(),
                    rio.Slider(),
                    rio.Dropdown(options=["Option 1", "Option 2", "Option 3"]),
                    rio.Card(
                        content=rio.Text("This is a card"),
                        on_press=print("Card clicked!"),
                    ),
                    rio.PointerEventListener(
                        content=rio.Text("This is a nested PointerEventListener"),
                        on_press=lambda e: print("Nested PointerEventListener clicked!"),
                    )
                ],
            ),
            on_press=lambda e: print("Naughty propagator clicked!"),
        )

[mad-moo]

I'm on this now. It looks like most components are actually trying to block the event, but the pointer event listener grabs it anyway.

[mad-moo]

Thank you @HeiziND . I'm going through them one-by-one.

PS: Cards work fine you just didn't register an event handler (print(...) -> lambda: print(...)) 😉

[HeiziND]

hey, thanks for taking the time! yes, my bad I just double-checked and Card is fine 🫡

[mad-moo]

Status update:

• TextInput is fine
• Button is fine
• DateInput is just a TextIput internally, so fine
• NumberInput is fine
• rio.Switch is fine
• rio.CheckBox has been fixed
• Card is fine - was discussed above
• PointerEventListener is fine on my end. @HeiziND can you please double check that it's really broken? It was easy to accidentally click past it in your code and think it's broken when you're really just missing it. Ask me how I know. Can also just be beause I'm testing on the dev version
• Slider is harder to fix - will be done later
• Dropdown has been fixed (commit still incoming)

For reference, here's my test code:

class MyRoot(rio.Component):
    def build(self) -> rio.Component:
        return rio.Rectangle(
            content=rio.PointerEventListener(
                rio.Column(
                    spacing=1,
                    margin=1,
                    *[
                        rio.TextInput(),
                        rio.Button(),
                        rio.DateInput(value=date.today()),
                        rio.NumberInput(value=42),
                        rio.Switch(),
                        rio.Checkbox(),
                        rio.Card(
                            content=rio.Text("This is a card"),
                            on_press=lambda: print("Card clicked!"),
                        ),
                        rio.PointerEventListener(
                            content=rio.Text(
                                "This is a nested PointerEventListener"
                            ),
                            on_press=lambda e: print(
                                "Nested PointerEventListener clicked!"
                            ),
                        ),
                        rio.Slider(),
                        rio.Dropdown(
                            options=["Option 1", "Option 2", "Option 3"]
                        ),
                    ],
                ),
                on_press=lambda e: print("Naughty propagator clicked!"),
            ),
            fill=rio.Color.GRAY,
            align_y=0,
            align_x=0,
        )

A release is imminent. Given that this is just a minor issue I would publish despite the state of the Slider and publish a fix for it later.

[HeiziND]

Thanks for the update. PointerEventListener is definitely broken in the current release, as I've tested it in multiple parts of my codebase. I think the dev version is dozens of commits ahead of the last release, and I agree that we are (long over-)due for a release. Wouldn't want this hold you back, and happy to test again after the release and report here.

…

On Mon, 23 Jun 2025 at 02:52, Mad Cow ***@***.***> wrote: *mad-moo* left a comment (rio-labs/rio#256) <#256 (comment)> Status update: - TextInput is fine - Button is fine - DateInput is just a TextIput internally, so fine - NumberInput is fine - rio.Switch is fine - rio.CheckBox has been fixed - Card is fine - was discussed above - PointerEventListener is fine on my end. @HeiziND <https://github.com/HeiziND> can you please double check that it's really broken? It was easy to accidentally click past it in your code and *think* it's broken when you're really just missing it. Ask me how I know. Can also just be beause I'm testing on the dev version - Slider is harder to fix - will be done later - Dropdown has been fixed (commit still incoming) For reference, here's my test code: class MyRoot(rio.Component): def build(self) -> rio.Component: return rio.Rectangle( content=rio.PointerEventListener( rio.Column( spacing=1, margin=1, *[ rio.TextInput(), rio.Button(), rio.DateInput(value=date.today()), rio.NumberInput(value=42), rio.Switch(), rio.Checkbox(), rio.Card( content=rio.Text("This is a card"), on_press=lambda: print("Card clicked!"), ), rio.PointerEventListener( content=rio.Text( "This is a nested PointerEventListener" ), on_press=lambda e: print( "Nested PointerEventListener clicked!" ), ), rio.Slider(), rio.Dropdown( options=["Option 1", "Option 2", "Option 3"] ), ], ), on_press=lambda e: print("Naughty propagator clicked!"), ), fill=rio.Color.GRAY, align_y=0, align_x=0, ) A release is imminent. Given that this is just a minor issue I would publish despite the state of the Slider and publish a fix for it later. — Reply to this email directly, view it on GitHub <#256 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANLDXG2G7PRAK2SWW6FGAJL3E33NNAVCNFSM6AAAAAB7DOR7VWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSOJUGM3TINBXGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>