leptos-use icon indicating copy to clipboard operation
leptos-use copied to clipboard

Textarea autosize unable to link to slice

Open johan-smits opened this issue 1 year ago • 2 comments

I have a large struct where I create a slice for. This returns a Signal and SignalSetter. When you want to use the use_textarea_autosize like this (the example does not compile and is only for demonstration of the flow):

let source = create_rw_signal(Object {
  textarea: String
});

let (textarea_data, set_textarea_data) = create_slice(
        source,
        |state| data.textarea.clone(),
        |state, n| data.textarea = n
    );

let textarea = create_node_ref::<Textarea>();
let UseTextareaAutosizeReturn {
        content,
        set_content,
        ..
    } = use_textarea_autosize_with_options(
        textarea,
        UseTextareaAutosizeOptions::default().content(textarea_data),
    );

view! {<textarea node_ref=textarea prop:value=content on:input=move |ev| { set_content.set(event_target_value(&ev)) } />}

Then you see I can't set the content that the use provides to the set_textarea_data. Then I thought I can use the sync_signal option like this:

let stop = sync_signal_with_options(
        (textarea_data.into(), set_textarea_data),
        (content, set_content),
        SyncSignalOptions::default().direction(SyncDirection::RightToLeft),
    );

But this function does not accept a SignalSetter as a writer function and there is no into as there is one for the getter.

Then I thought I can set both with on the on:input but this causes focus loss of the input.

I don't want to use the sync_signal but how should this be solved?

johan-smits avatar Dec 10 '24 13:12 johan-smits

Managed to use the auto height calculation by not using the setters:

let UseTextareaAutosizeReturn { .. } = use_textarea_autosize_with_options(
        textarea,
        UseTextareaAutosizeOptions::default().content(textarea_data),
    );

But maybe there is a better solution.

johansmitsnl avatar Dec 10 '24 14:12 johansmitsnl

I was indeed planning to integrate stores better into leptos-use. So let me see what to do here.

That being said your solution is not bad at all.

maccesch avatar Dec 10 '24 17:12 maccesch

Fixed in d19792abc27e0e4d334c50c9319c443d7fdf7dbf

maccesch avatar Jun 12 '25 16:06 maccesch