gpui-component icon indicating copy to clipboard operation
gpui-component copied to clipboard

Input placehoder with masked has unexpected y-offset

Open ScarboroughCoral opened this issue 1 month ago • 4 comments

macOS 15.5 rustc 1.89.0 (29483883e 2025-08-04)

gpui = "0.2.2" gpui-component = "0.4.0" gpui-component-assets = "0.4.0" anyhow = "1.0.100"

Image Image
        // new
        let password_input = cx.new(|cx| {
            InputState::new(window, cx)
                .masked(true)
                .placeholder("请输入密码")
        });
        let verify_code_input = cx.new(|cx| {
            InputState::new(window, cx)
                .validate(|s, _| s.len() <= 6 && s.parse::<u64>().is_ok())
                .placeholder("请输入验证码")
        });
           
        // render
         v_form()
               .child(field().child(Input::new(&self.phone).focus_bordered(false)))
               .child(if self.active_tab == 0 {
                      field().child(Input::new(&self.verify_code).focus_bordered(false))
                    } else {
                      field().child(Input::new(&self.password).focus_bordered(false))
                    })

ScarboroughCoral avatar Dec 02 '25 02:12 ScarboroughCoral

Have you tried to depend on git main branch? I have changed some about this, this may be fixed.

huacnlee avatar Dec 02 '25 05:12 huacnlee

Have you tried to depend on git main branch? I have changed some about this, this may be fixed.

rustc 1.89.0 (29483883e 2025-08-04)

I have run cargo clean and install from git main branch. The problem still exists gpui-component = { branch = "main", git = "https://github.com/longbridge/gpui-component.git"}

Image Image

ScarboroughCoral avatar Dec 02 '25 06:12 ScarboroughCoral

I have just tried on Windows, but I can reproduce.

Please make a simple example code with full main.rs for me.

huacnlee avatar Dec 02 '25 13:12 huacnlee

I have just tried on Windows, but I can reproduce.

Please make a simple example code with full main.rs for me.

use gpui::{
    AppContext, Application, Bounds, Context, Entity, IntoElement, ParentElement, Render, Window,
    WindowBounds, WindowOptions, div, px, size,
};
use gpui_component::{
    Root,
    form::{field, v_form},
    input::{Input, InputState},
};
struct TestInput {
    value: Entity<InputState>,
    password: Entity<InputState>,
}
impl TestInput {
    pub fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
        let value = cx.new(|cx| {
            InputState::new(window, cx)
                .placeholder("请输入手机号")
        });
        let password = cx.new(|cx| {
            InputState::new(window, cx)
                .masked(true)
                .placeholder("请输入密码")
        });
        Self { value, password }
    }
}
impl Render for TestInput {
    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        div().child(
            v_form()
                .child(field().child(Input::new(&self.value)))
                .child(field().child(Input::new(&self.password)))
        ).child(div().child(self.value.read(cx).value()))
    }
}
struct TestApp {
    test_input: Entity<TestInput>,
}
impl TestApp {
    pub fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
        let test_input = cx.new(|cx| TestInput::new(window, cx));
        Self { test_input }
    }
}
impl Render for TestApp {
    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        div().child(self.test_input.clone())
    }
}
fn main() {
    Application::new()
        .with_assets(gpui_component_assets::Assets)
        .run(|cx| {
            gpui_component::init(cx);
            cx.activate(true);
            let bounds = Bounds::centered(None, size(px(1220.), px(740.0)), cx);
            cx.on_window_closed(|cx| {
                if cx.windows().is_empty() {
                    cx.quit();
                }
            })
            .detach();
            cx.spawn(async move |cx| {
                cx.open_window(
                    WindowOptions {
                        window_bounds: Some(WindowBounds::Windowed(bounds)),
                        ..Default::default()
                    },
                    |window, cx| {
                        let view = cx.new(|cx| TestApp::new(window, cx));
                        cx.new(|cx| Root::new(view, window, cx))
                    },
                )?;
                Ok::<_, anyhow::Error>(())
            })
            .detach();
        });
}

ScarboroughCoral avatar Dec 03 '25 05:12 ScarboroughCoral

we also hit this under gpui-component = "0.5.0-preview2"

I believe it might be related to a hardcoded value of PR #590.

Image

18o avatar Dec 06 '25 04:12 18o