Avatar and Select not reactive

[l0uisgrange]

Hi there 👋,
I've been trying to make a reactive app in rust using this library and it's been a real pleasure so far! Thanks ❤️!
However, my Avatar is now showing up (even though the image URL works), and the Select component is not reactive (does not work on click)...
I went through the docs bug maybe I missed something?

use gpui::{
    Application, Context, FontWeight, Point, TitlebarOptions, Window, WindowOptions, div,
    prelude::*, px, rgb,
};
use gpui_component::{
    avatar::Avatar,
    button::*,
    select::{Select, SelectState},
    *,
};

struct HelloWorld {}

impl Render for HelloWorld {
    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let state = cx.new(|cx| {
            SelectState::new(
                vec!["Apple", "Orange", "Banana"],
                Some(IndexPath::default()),
                window,
                cx,
            )
        }); // <-- THIS IS FROM THE DOCS
        div().flex().flex_col().size_full().children(vec![
            div()
                .flex_none()
                .flex()
                .h(px(37.0))
                .p(px(5.0))
                .pl(px(80.0))
                .bg(rgb(0xffffff))
                .items_center()
                .justify_between()
                .text_xs()
                .font_weight(FontWeight::NORMAL)
                .children(vec![
                    div().child("Nav").into_any_element(),
                    Avatar::new() // <-- THIS DOES NOT SHOW UP
                        .name("feefe")
                        .src("https://github.com/l0uisgrange.png")
                        .size_6()
                        .into_any_element(),
                ])
                .border_b(px(1.0))
                .border_color(rgb(0xe4e4e7)),
            div()
                .flex_none()
                .p(px(5.0))
                .flex()
                .flex_row()
                .gap_2()
                .bg(rgb(0xffffff))
                .border_b(px(1.0))
                .border_color(rgb(0xe4e4e7))
                .children(vec![
                    Button::new("run")
                        .outline()
                        .label("Run")
                        .text_xs()
                        .icon(Icon::new(IconName::Replace).small())
                        .tooltip("This is a helpful tooltip")
                        .into_any_element(),
                    Select::new(&state) // <-- THIS IS NOT REACTIVE
                        .placeholder("Select a language...")
                        .w(px(120.0))
                        .mr_auto()
                        .into_any_element(),
                ])
                .children(vec![
                    Select::new(&state)
                        .placeholder("Select a language...")
                        .w(px(120.0))
                        .mr_auto(),
                ]),
            div().flex().flex_row().size_full().children(vec![
                div()
                    .flex_initial()
                    .w(px(200.0))
                    .bg(rgb(0xfafafa))
                    .child("Zone Gauche")
                    .border_r(px(1.0))
                    .border_color(rgb(0xe4e4e7)),
                div()
                    .flex_1()
                    .bg(rgb(0xffffff))
                    .child(format!("Hello, !"))
                    .border_r(px(1.0))
                    .border_color(rgb(0xe4e4e7)),
                div().flex_initial().w(px(200.0)).bg(rgb(0xffffff)).child(
                    Select::new(&state)
                        .placeholder("Select a language...")
                        .w(px(120.0))
                        .mr_auto()
                        .into_any_element(),
                ),
            ]),
        ])
    }
}

fn main() {
    let app = Application::new().with_assets(gpui_component_assets::Assets);
    app.run(move |cx| {
        gpui_component::init(cx);
        cx.spawn(async move |cx| {
            cx.open_window(
                WindowOptions {
                    titlebar: Some(TitlebarOptions {
                        appears_transparent: true,
                        traffic_light_position: Some(Point {
                            x: px(11.0),
                            y: px(11.0),
                        }),
                        ..Default::default()
                    }),
                    ..Default::default()
                },
                |window, cx| {
                    let view = cx.new(|_cx| HelloWorld {});
                    cx.new(|cx| Root::new(view, window, cx))
                },
            )?;

            Ok::<_, anyhow::Error>(())
        })
        .detach();
        cx.activate(true);
    });
}

[huacnlee]

Sorry, for the wrong in docs.

 let state = cx.new(|cx| {
            SelectState::new(
                vec!["Apple", "Orange", "Banana"],
                Some(IndexPath::default()),
                window,
                cx,
            )
        }); // <-- THIS IS FROM THE DOCS

This is not correct, render method will drop the state after call, you must store the state in HelloWorld struct.

struct HelloWorld {
    state: Entity<SelectState>,
}

[huacnlee]

Also same issue like #1751

[l0uisgrange]

Thanks! 👍