Closed PenryZen closed 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:
safari:
Ok now...
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.)
chrome:![WX20240418-002922@2x](https://github.com/leptos-rs/leptos/assets/129937409/9ee591d3-2b94-4cd7-ab3c-cc4f1345e34e)
safari:![WX20240418-003041@2x](https://github.com/leptos-rs/leptos/assets/129937409/2705cf64-20f8-44b6-9c97-660f3ea3d92a)