Using on:change on a textarea requires an extra click to trigger the onchange function

[mahatoankitkumar]

Using on:change on a textarea requires an extra click to trigger the onchange function. After entering text in the textarea, the button needs to be clicked twice to trigger the onclick function.

[gbj]

Code?

[gbj]

Okay.

The problem as described initially doesn't seem to be true: on:change fires correctly in a minimal example:

use leptos::*;

#[component]
pub fn App() -> impl IntoView {
    view! {
        <textarea
            on:change=move |event| {
                logging::log!("change event fired");
            }
        >
        </textarea>
    }
}

Unfortunately I don't have the time/capacity to help debug app-sized examples. If you can create a minimal reproduction of the problem, I'm happy to take a look. By "minimal reproduction" I mean: Something like what I pasted above, which can run in one file without needing other imports from your app, without unrelated code, etc. Creating a minimal reproduction can also help narrow down the actual problem.

Things I notice, which may or may not be important or relevant

• The textarea would be re-created every time overrides changes and be a different textarea element
• The event listener here uses .update_untracked(), which means nothing should be observed to happen when you call it -- are you putting a log or something that shows the event listener isn't firing, or is it just that nothing is happening because of the untracked update?

[mahatoankitkumar]

Hey, here is a minimal reproduction of the issue, in the below example, if you write something in the textarea and then click on delete, the delete button on:click doesn't execute the first time you click, it executes on the 2nd click.

In my earlier code the add override button also does not gets clicked, the first time.

`

#[derive(Clone)]
struct Override {
    key: Option<String>,
    value: Option<String>,
}

#[component]
pub fn test_form() -> impl IntoView {
    let (overrides, set_overrides) = create_signal(vec![
        Override { key: Some("key1".to_string()), value: Some("value1".to_string()) },
        Override { key: Some("key2".to_string()), value: Some("value2".to_string()) },
    ]);

let add_override = move || {
    set_overrides.update(|curr_overrides| {
        let new_key = format!("key{}", curr_overrides.len() + 1);
        curr_overrides.push(Override { key: Some(new_key), value: Some("".to_string()) });
    });
};

let remove_override = move |index: usize| {
    set_overrides.update(|curr_overrides| {
        curr_overrides.remove(index);
    });
};

view! {
    <div>
        {
            move || {
                overrides.with(|overrides| {
                    overrides.iter().enumerate().map(|(index, ele)| {
                        let key = ele.key.clone().unwrap_or_default();
                        let value = ele.value.clone().unwrap_or_default();

                        view! {
                            <div class="w-2/5 mb-2">
                                <textarea
                                    type="text"
                                    placeholder="Enter override here"
                                    name="override"
                                    class="input input-bordered w-[450px] flex items-center bg-white text-gray-700 shadow-md pt-3"
                                    on:change=move |event| {
                                        event.prevent_default();
                                        let input_value = event_target_value(&event);
                                        set_overrides.update(move |curr_overrides| {
                                            if let Some(override_item) = curr_overrides.get_mut(index) {
                                                override_item.value = Some(input_value.clone());
                                            }
                                        })
                                    }
                                >
                                    {value}
                                </textarea>
                                <button
                                    class="btn btn-ghost btn-circle btn-sm"
                                    on:click=move |ev| {
                                        ev.prevent_default();
                                        remove_override(index);
                                    }
                                >
                                    <i class="ri-delete-bin-2-line text-xl text-2xl font-bold"></i>
                                </button>
                            </div>
                        }.into_view()
                    }).collect::<Vec<_>>()
                })
            }
        }
        <div>
            <button
                class="btn btn-primary"
                on:click=move |ev| {
                    ev.prevent_default();
                    add_override();
                }
            >
                "Add Override"
            </button>
        </div>
    </div>
}
}

`

[gbj]

Thanks. Yes, it's actually the other side of the first issue I noted: because this is an unkeyed list and because signal updates run synchronously, the whole list (including all the elements) is re-created every time overrides changes. This happens immediately when the change event fires, which is when you blur away from the textarea while clicking the button.

This means that events things in the following order:

• change fires on the textarea, and click fires on the button
• the change handler updates overrides
• this re-renders the list, replacing the old textarea and old button with a new textarea and new button
• the button you clicked no longer exists, so its event handler is not actually called

The best solution is to use a keyed list instead, which will also improve the performance of the list significantly:

#[derive(Clone)]
struct Override {
    key: Option<String>,
    value: Option<String>,
}

#[component]
pub fn test_form() -> impl IntoView {
    let (overrides, set_overrides) = create_signal(vec![
        Override {
            key: Some("key1".to_string()),
            value: Some("value1".to_string()),
        },
        Override {
            key: Some("key2".to_string()),
            value: Some("value2".to_string()),
        },
    ]);

    let add_override = move || {
        set_overrides.update(|curr_overrides| {
            let new_key = format!("key{}", curr_overrides.len() + 1);
            curr_overrides.push(Override {
                key: Some(new_key),
                value: Some("".to_string()),
            });
        });
    };

    let remove_override = move |index: usize| {
        set_overrides.update(|curr_overrides| {
            curr_overrides.remove(index);
        });
    };

    view! {
        <div>
            <For each=move || overrides.get()
                key=|row| row.key.clone()
                let:row
            >
                <div class="w-2/5 mb-2">
                    <textarea
                        placeholder="Enter override here"
                        name="override"
                        class="input input-bordered w-[450px] flex items-center bg-white text-gray-700 shadow-md pt-3"
                        on:change={
                            let key = row.key.clone();
                            move |event| {
                                event.prevent_default();
                                let input_value = event_target_value(&event);
                                set_overrides.update(|curr_overrides| {
                                    if let Some(override_item) = curr_overrides.iter_mut().find(|this| this.key == key) {
                                        override_item.value = Some(input_value.clone());
                                    }
                                })
                            }
                        }
                    >
                        {row.value}
                    </textarea>
                    <button
                        class="btn btn-ghost btn-circle btn-sm"
                        on:click=move |ev| {
                            ev.prevent_default();
                            set_overrides.update(|overrides| {
                                overrides.retain(|this| this.key != row.key);
                            });
                        }
                    >
                        "Delete"
                    </button>
                </div>
            </For>
            <div>
                <button
                    class="btn btn-primary"
                    on:click=move |ev| {
                        leptos::logging::log!("click event");
                        ev.prevent_default();
                        add_override();
                    }
                >
                    "Add Override"
                </button>
            </div>
        </div>
    }
}

[mahatoankitkumar]

Hey, i would want the form to re-render on the change of the value also as i have multiple components like dropdown, toggles, etc under the for loop. When i do
key=|row| format!("{:?}-{:?}", row.key.clone(), row.value.clone())
The same problem appears to happen.

[mahatoankitkumar]

Here even if a new delete button gets created after the re-render, the callback should be attached every time right and it should be called on the first click itself.