leptos-rs / leptos

Build fast web applications with Rust.
https://leptos.dev
MIT License
15.31k stars 599 forks source link

There is a bug in Safari browser where signals cannot be transmitted properly #2539

Closed PenryZen closed 2 months ago

PenryZen commented 2 months ago

I've created a Post struct and used a form for input. The input content is supposed to be displayed in real-time in the BlogPost component. Unfortunately, this functionality doesn't work properly on Safari. (It works fine on Chrome, though.)

#[component]
pub fn EditPost() -> impl IntoView {
    let params  = use_params::<EditPostParams>();
    let (post,set_post) = create_signal(Post::new_empty());
    view! {
        <div class="flex h-screen">//style: full height
            <div class="min-w-[50%] max-h-[90%] text-gray-200 dark:bg-gray-800 bg-gray-100 p-10 rounded-md">
                <form>
                    <label class="block mb-4">
                    <span>Title</span>
                    <input class="mt-1 p-2 w-full" type="text" id="title" name="title" 
                        on:input=move |ev|{
                            set_post.update(|post| post.title= event_target_value(&ev))
                        }
                        prop:value={move || post.get().title}/>
                    </label>
                    <label class="block mb-4">
                    <span>Entry</span>
                    <textarea class="mt-1 p-2 w-full" id="text" name="text" 
                        on:input=move |ev|{
                            println!("{}",post.get().text);
                            set_post.update(|post| post.text= event_target_value(&ev))
                        }
                        prop:value={move || post.get().text}/>
                    </label>
                </form>
            </div>
            <div>
                {move || view!{<BlogPost post=post.get()/>}}
            </div>
        </div>
    }
}
#[component]
pub fn BlogPost(post: Post) -> impl IntoView {
    view! {
        <div class="block p-10">
            <div class="text-4xl pb-4">{&post.title}</div>
            <div>{&post.text}</div>
        </div> 
    }
}

chrome: WX20240418-002922@2x

safari: WX20240418-003041@2x

PenryZen commented 2 months ago

Ok now...