UI button is still Interaction::Pressed when to the right of its Overflow::clip() parent.

[Selene-Amanita]

Bevy version

0.12.0

What you did

Try to make a Carroussel, here is a simplified version with a root node (with purple border) that hides the overflow, a stip node just underneath, and three item children (red, blue and green background) that can be clicked. The strip is setup to display the middle child, green.

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .add_systems(Update, interact_check)
        .run();
}

fn setup(mut commands: Commands) {
    commands.spawn(Camera2dBundle::default());

    commands.spawn(NodeBundle {
        style: Style {
            position_type: PositionType::Absolute,
            width: Val::Px(220.),
            height: Val::Px(220.),
            left: Val::Px(300.),
            top: Val::Px(300.),
            border: UiRect::all(Val::Px(10.)),
            overflow: Overflow::clip(),
            ..default()
        },
        border_color: BorderColor(Color::PURPLE),
        ..default()
    }).with_children(|parent| {
        parent.spawn(NodeBundle {
            style: Style {
                position_type: PositionType::Absolute,
                width: Val::Px(600.),
                height: Val::Px(200.),
                left: Val::Px(-200.),
                ..default()
            },
            ..default()
        }).with_children(|parent| {
            parent.spawn(ButtonBundle {
                style: Style {
                    width: Val::Px(200.),
                    height: Val::Px(200.),
                    ..default()
                },
                background_color: BackgroundColor(Color::RED),
                ..default()
            });
            parent.spawn(ButtonBundle {
                style: Style {
                    width: Val::Px(200.),
                    height: Val::Px(200.),
                    ..default()
                },
                background_color: BackgroundColor(Color::GREEN),
                ..default()
            });
            parent.spawn(ButtonBundle {
                style: Style {
                    width: Val::Px(200.),
                    height: Val::Px(200.),
                    ..default()
                },
                background_color: BackgroundColor(Color::BLUE),
                ..default()
            });
        });
    });
}

fn interact_check(
    interactions: Query<(&Interaction, &BackgroundColor), Changed<Interaction>>
) {
    for (interaction, background_color) in interactions.iter() {
        if matches!(interaction, Interaction::Pressed) {
            dbg!(format!("Pressed {:?}", background_color.0));
        }
    }
}

What went wrong

• When I click in the left area outside of the root node, nothing happens, as expected, the Interaction component of the first red item doesn't change to Pressed, this is expected
• When I click in the right area outside of the root node, to the right, the Interaction of the third blue item changes to Pressed, I feel like it shouldn't
• I would expect the left and right border of the root node to appear in purple, instead it is "overiden" by the children nodes
• When I click on the red and blue children's area that overlap the border of the root node, their Interaction component changes to Pressed, I feel like it shouldn't.

[hymm]

Does #10454 fix this issue for you?

[Selene-Amanita]

@hymm

It does fix the "clicking in the right area outside of the root node" part, which is the most annoying and wrong one, and the reason I wrote this issue.

It doesn't fix the weird interactions with the borders though, so I will probably keep this open for that reason.

Thank you for linking it!

[ickshonpe]

The interactions with the borders are correct.
In your example, the border belongs to the node with Overflow::clip applied to it. The border is within the clipped area and so anything visible is drawn above it.

Instead, you need to change the border so it's around and not inside the node with clipping. I modified your example to what I think is the desired behaviour:

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .add_systems(Update, interact_check)
        .run();
}

fn setup(mut commands: Commands) {
    commands.spawn(Camera2dBundle::default());

    commands.spawn(NodeBundle {
        style: Style {
            position_type: PositionType::Absolute,
            left: Val::Px(300.),
            top: Val::Px(300.),
            border: UiRect::all(Val::Px(10.)),
            ..Default::default()
        },
        border_color: BorderColor(Color::PURPLE),
        ..Default::default()
    }).with_children(|parent| {
        parent.spawn(NodeBundle {
            style: Style {
                width: Val::Px(200.),
                height: Val::Px(200.),    
                overflow: Overflow::clip(),
                ..default()
            },
            ..default()
        }).with_children(|parent| {
            parent.spawn(NodeBundle {
                style: Style {
                    position_type: PositionType::Absolute,
                    width: Val::Px(600.),
                    height: Val::Px(200.),
                    left: Val::Px(-200.),
                    ..default()
                },
                ..default()
            }).with_children(|parent| {
                parent.spawn(ButtonBundle {
                    style: Style {
                        width: Val::Px(200.),
                        height: Val::Px(200.),
                        ..default()
                    },
                    background_color: BackgroundColor(Color::RED),
                    ..default()
                });
                parent.spawn(ButtonBundle {
                    style: Style {
                        width: Val::Px(200.),
                        height: Val::Px(200.),
                        ..default()
                    },
                    background_color: BackgroundColor(Color::GREEN),
                    ..default()
                });
                parent.spawn(ButtonBundle {
                    style: Style {
                        width: Val::Px(200.),
                        height: Val::Px(200.),
                        ..default()
                    },
                    background_color: BackgroundColor(Color::BLUE),
                    ..default()
                });
            });
        });
    });
}

fn interact_check(
    interactions: Query<(&Interaction, &BackgroundColor), Changed<Interaction>>
) {
    for (interaction, background_color) in interactions.iter() {
        if matches!(interaction, Interaction::Pressed) {
            dbg!(format!("Pressed {:?}", background_color.0));
        }
    }
}

[Selene-Amanita]

@ickshonpe I see, I didn't know that was expected behavior.

I will close this as a non-issue/duplicate of #10470 then.