sycamore-rs / sycamore

A library for creating reactive web apps in Rust and WebAssembly
https://sycamore-rs.netlify.app
MIT License
2.79k stars 148 forks source link

Keydown event not firing on textarea #673

Closed scarryaa closed 4 months ago

scarryaa commented 4 months ago

Describe the bug Keydown event not firing on textarea.

To Reproduce Steps to reproduce the behavior:

  1. Implement the following code:
  2. Run the app cargo tauri dev
  3. Note lack of console logging
#[derive(Props)]
pub struct AstroEditorProps<G: Html> {
    value: Signal<String>,
    element_ref: NodeRef<G>,
    editor: Signal<PieceTree>,
}

#[component]
pub fn AstroEditor<G: Html>(props: AstroEditorProps<G>) -> View<G> {
    let keydown = move |event: KeyboardEvent| {
        let event: KeyboardEvent = event.unchecked_into();
        match event.key().as_str() {
            "Enter" => {
                println!("Enter pressed");
                props.editor.update(|editor| {
                    editor.insert(1, "\n")
                });
                props.value.update(|value| {
                    *value = String::new();
                });
            }
            _ => {
                println!("Other key pressed");
            }
        }
    };
    view! {
        textarea(ref=props.element_ref, bind:value=props.value, class="astro-editor-textarea", on:keydown=keydown) {
            (props.editor.get_clone().to_string())
        }
    }
}

Expected behavior Keydown event should log to console, but no output is visible.

Screenshots N/A

Environment

Additional context I'm not sure if I am doing something wrong, or if this is indeed a bug. I changed the textarea element to a div, same issue. I have a on:click event on another div that is working fine, so I don't know what the issue here is.

Strangely, event.preventDefault() is working, but nothing else beyond that runs.

scarryaa commented 4 months ago

A minimal example tested outside of Tauri isn't working either -- nothing is printed to the console.

fn main() {
    sycamore::render(|| view! {
        input(on:keydown=move |event: KeyboardEvent| {
            let event: KeyboardEvent = event.unchecked_into();
            println!("{}", event.code());
        } ) { "Hello, World!" }
    });
}

Neither does this:

fn main() {
    sycamore::render(|| view! {
        input(on:input=move |event: Event| {
            println!("{:?}", event);
        }) { "Hello, World!" }
    });
}
scarryaa commented 4 months ago

Closing this issue -- I realized I was using the wrong thing, println! instead of something like console::log_1(&JsValue::from_str(&key)), which works correctly.