Using scene patch to update items in FeathersListView leads to strange results

[sadmac7000]

Bevy version and features

• Bevy 0.19 with features 2d, ui, bevy_feathers

What you did

Ran the following program:

use bevy::{
    feathers::{
        FeathersPlugins,
        containers::*,
        controls::*,
        dark_theme::create_dark_theme,
        theme::{ThemeBackgroundColor, ThemedText, UiTheme},
        tokens,
    },
    input_focus::tab_navigation::TabGroup,
    prelude::*,
    ui::Selected,
    ui_widgets::listbox_update_selection,
};

#[derive(Component, Clone, Default)]
struct NeedsPopulate;

fn main() {
    App::new()
        .add_plugins((DefaultPlugins, FeathersPlugins))
        .insert_resource(UiTheme(create_dark_theme()))
        .add_systems(Startup, scene.spawn())
        .add_systems(Update, do_update)
        .run();
}

fn do_update(
    mut timer: Local<Option<Timer>>,
    time: Res<Time>,
    q_entity: Query<Entity, (With<FeathersListView>, With<NeedsPopulate>)>,
    mut commands: Commands,
) {
    let timer = timer.get_or_insert_with(|| Timer::from_seconds(2., TimerMode::Once));
    timer.tick(time.delta());
    if timer.is_finished() {
        for entity in q_entity {
            commands.entity(entity).apply_scene(bsn! {
                @FeathersListView {
                    @rows: {bsn_list![
                        @FeathersListRow Children [(Text("First World") ThemedText)],
                        @FeathersListRow Selected Children [(Text("Second Nature") ThemedText)],
                        @FeathersListRow Children [(Text("Third Degree") ThemedText)],
                    ]}
                }
            });
        }
    }
}

fn scene() -> impl SceneList {
    bsn_list![Camera2d, demo_root()]
}

fn demo_root() -> impl Scene {
    bsn! {
        Node {
            width: percent(100),
            height: percent(100),
            align_items: AlignItems::Start,
            justify_content: JustifyContent::Start,
            display: Display::Flex,
            flex_direction: FlexDirection::Row,
            column_gap: px(8),
        }
        TabGroup
        ThemeBackgroundColor(tokens::WINDOW_BG)
        Children[
            demo_column_2(),
        ]
    }
}

fn demo_column_2() -> impl Scene {
    bsn! {
        Node {
            display: Display::Flex,
            flex_direction: FlexDirection::Column,
            align_items: AlignItems::Stretch,
            justify_content: JustifyContent::Start,
            padding: px(8),
            row_gap: px(8),
            width: percent(30),
            min_width: px(200),
        }
        Children [
            subpane() Children [
                subpane_header() Children [
                    (Text("List") ThemedText),
                ],
                subpane_body() Children [
                    NeedsPopulate
                    @FeathersListView
                    Node {
                        max_height: px(130)
                    }
                    on(listbox_update_selection)
                ],
            ]
        ]
    }
}

What went wrong

In addition to the items updating inside the list view, there's a weird ghost of the list view content at the top of the window and the entire viewport now has a scrollbar.

I don't see why this way of updating the ListView would go wrong in this way. If there is an explanation then at a minimum I think there should be some documentation somewhere about how to add items to a FeathersListView programatically after scene initialization.

[mansiverma897993]

@alice-i-cecile @sadmac7000 I have raised #25015 can you take a look on it ??

[viridia]

There's a workaround for this, which I use in bevy_reactor:

        parent.queue_apply_scene(bsn! {
            // Despawn old children before adding new ones
            bundle_template(|context| {
                context.entity.despawn_children();
                Ok(())
            })
            Children [
                {(self)()}
            ]
        });

This is a rather brute-force approach, in that it replaces the entire list every time. A better way is to diff on the list values and only replace the rows that need a-changin'.

[sadmac7000]

Can confirm that the linked PR fixes the issue for me.