Scroll to element VirtualList

[fumagall]

Hello,

I played around with VirtualList and I coudn't find out a way to scroll to a specified element.

I managed to hack a go-to-the-top by setting the length of the virtual list to zero and back to the original value by leveraging onmousedown and onmouseup (see code below).

Is there a better way to do that and if not, is there a better way that my hack works with onsubmit when using forms?
edit: The hack works with forms now.

Best wishes
Luci

use dioxus::prelude::*;
use crate::components::virtual_list::VirtualList;

const INLINE_STYLE: &str = r#".dx-virtual-list-container {
  position: relative;
  max-height: 36rem;
  contain: layout paint;
  overflow-y: auto;
}

.dx-virtual-list-demo {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  gap: 0.75rem;
}

.dx-virtual-list-card {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--primary-color-6);
  border-radius: 0.625rem;
  background: var(--primary-color-2);
}

.dx-virtual-list-card h3 {
  margin: 0 0 0.3rem;
  color: var(--primary-color-12);
  font-size: 0.95rem;
}

.dx-virtual-list-card p {
  margin: 0;
  color: var(--primary-color-11);
  font-size: 0.875rem;
  line-height: 1.4;
}"#;

struct NotCloneableListElement {
    name: String
}

/// The Home page component that will be rendered when the current route is `[Route::Home]`
#[component]
pub fn Show() -> Element {
    
    let list = use_signal(|| {
        let mut u: Vec<NotCloneableListElement> = Vec::<NotCloneableListElement>::new();
        for i in 1..40000 {
            u.push(NotCloneableListElement { name: format!("Test_{}", i).to_string()});
        }
        u
    });

    let mut reset = use_signal(|| true);
    let filtered_list_count = use_memo(move || {if (reset()) { return list.len() } {return 0}});

    rsx! {
        div { class: "dx-virtual-list-demo",
            button {
                onmousedown: move |_| {
                    reset.set(false);
                },
                onmouseup: move |_| { reset.set(true)
                                                                },
                "Go To Top"
            }
            div {
                style { {INLINE_STYLE} }
                VirtualList {
                    // Total number of items.
                    count: filtered_list_count(),
                    // Render buffer (approximate row count) above and below viewport.
                    buffer: 100usize,
                    // Row renderer callback receives the absolute index.
                    estimate_size: |_| 48,
                    render_item: move |idx: usize| {
                        let element = list.get(idx).expect("error1");
                        let name = element.name.as_str();

                        rsx! {
                            article { class: "dx-virtual-list-card", key: "{idx}", "{idx} {name}" }
                        }
                    },
                }
            }
        }
    }
}

[fumagall]

To make my scroll-to-the-top hack work with forms, I can use onkeyup and onkeydown of the input element:

input {
    onkeyup: move |_| {
        reset.set(true);
    },

    onkeydown: move |_| {
        reset.set(false);
    },

    onfocusout: move |_| {
        submit_data();
    }
    
    // ... further code ...
}