Text Input No Cursor

[philocalyst]

Seems to update state but only upwards, not downwards (no backspace events are being manifested) -- and the cursor is invisible.

use emoji;
use emoji::Emoji;
use emoji_search;
use gpui_component::Root;
use gpui_component::input::InputEvent;
use std::sync::LazyLock;

use gpui::{
    App, Application, Bounds, Context, Entity, FocusHandle, Focusable, KeyBinding, Keystroke,
    MouseButton, Pixels, SharedString, Subscription, Window, WindowBounds, WindowOptions, actions,
    black, div, prelude::*, px, rems, rgb, rgba, size, white,
};
use gpui_component::input::{InputState, TextInput};
use gpui_component::theme::Theme;

actions!(text_input, [Quit,]);

#[derive(Clone)]
struct InputExample {
    emojis: Vec<Emoji>,
    input_state: Entity<InputState>,
    recent_keystrokes: Vec<Keystroke>,
    focus_handle: FocusHandle,
}

impl Focusable for InputExample {
    fn focus_handle(&self, _: &App) -> FocusHandle {
        self.focus_handle.clone()
    }
}

static EMOJI_DATA: LazyLock<emoji_search::types::EmojiData> =
    std::sync::LazyLock::new(|| emoji_search::types::load_emoji_data().unwrap());

static SEARCHER: LazyLock<emoji_search::EmojiSearcher> =
    LazyLock::new(|| emoji_search::EmojiSearcher::new(&*EMOJI_DATA, None));

impl Render for InputExample {
    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        cx.set_global(Theme::default());

        let active_text = self.input_state.read(cx).text().clone().to_string();

        let matcher: &'static emoji_search::EmojiSearcher = &*SEARCHER;

        let active_emoji: Vec<&Emoji> = match active_text.as_str() {
            "" => emoji::lookup_by_glyph::iter_emoji().collect(),
            _ => matcher
                .search_best_matching_emojis(&active_text, Some(10))
                .unwrap(),
        };

        div()
            .child(
                TextInput::new(&self.input_state)
                    .appearance(true)
                    .cleanable()
                    .bg(rgb(0xeeeeee))
                    .w_full()
                    .p(px(4.)),
            )
            .bg(rgb(0xaaaaaa))
            .track_focus(&self.focus_handle(cx))
            .flex()
            .flex_col()
            .size_full()
            .child(
                div()
                    .bg(white())
                    .border_b_1()
                    .border_color(black())
                    .flex()
                    .flex_row()
                    .justify_between(),
            )
            .child(
                div()
                    .bg(white())
                    .border_b_1()
                    .border_color(black())
                    .flex()
                    .flex_row()
                    .flex_wrap()
                    .justify_center()
                    .gap(rems(0.25))
                    .children(active_emoji.into_iter().enumerate().map(|(id, moji)| {
                        div().id(id).child(moji.glyph).cursor_pointer().on_click(
                            move |_event, _window, _cx| {
                                println!("{moji:?}");
                            },
                        )
                    }))
                    .text_size(rems(1.5)),
            )
    }
}

fn main() {
    Application::new().run(|cx: &mut App| {
        let bounds = Bounds::centered(None, size(px(300.0), px(300.0)), cx);

        let window = cx
            .open_window(
                WindowOptions {
                    titlebar: None,
                    window_bounds: Some(WindowBounds::Windowed(bounds)),
                    ..Default::default()
                },
                |window, cx| {
                    // Set the theme before creating Root
                    cx.set_global(Theme::default());

                    let input_state =
                        cx.new(|cx| InputState::new(window, cx).placeholder("Type here..."));

                    window.focus(&input_state.read(cx).focus_handle(cx));

                    // Subscribe with correct closure signature
                    cx.subscribe(
                        &input_state,
                        |_subscriber: Entity<InputState>, event: &InputEvent, cx: &mut App| {
                            let text = _subscriber.read(cx);
                            eprintln!("Input event: {:?}", text.text());
                        },
                    )
                    .detach();

                    let input_example = cx.new(|cx| InputExample {
                        emojis: vec![],
                        input_state: input_state.clone(),
                        recent_keystrokes: vec![],
                        focus_handle: cx.focus_handle(),
                    });

                    // Wrap InputExample in Root
                    cx.new(|cx| Root::new(input_example.into(), window, cx))
                },
            )
            .unwrap();

        cx.on_action(|_: &Quit, cx| cx.quit());
        cx.bind_keys([KeyBinding::new("cmd-q", Quit, None)]);
    });
}

[huacnlee]

gpui_component::init(cx);

Add this line in your open_window block first line.

[philocalyst]

gasp thanks so much

[philocalyst]

now I will say that while it handles backspaces now, I still don't see a cursor, or the text I input, although it must be there somewhere of course (I can select, etc.)

I wonder if I'm masking it out somehow?

[huacnlee]

Try this example: #1380

[philocalyst]

The issue was that I was setting the theme default on every render call... The example really helped though! And I love how there's a new examples dir that's much much simpler :)

…

From: Jason Lee ***@***.***> Sent: 14 October 2025 22:35 To: longbridge/gpui-component ***@***.***> Cc: Miles Wirht ***@***.***>, Author ***@***.***> Subject: Re: [longbridge/gpui-component] Text Input No Cursor (Discussion #1368) Try this example: #1380 -- Reply to this email directly or view it on GitHub: #1368 (reply in thread) You are receiving this because you authored the thread. Message ID: ***@***.***>