Issue filtering a vector

[seanpmyers]

Issue filtering a vector

Context

• sycamore = { version = "0.8.2" }
• perseus = { version = "0.4.2" }
• ComboBox Component File
• Parent Page File

Goal

I am trying to create a combobox basically.

I have one HTML input for the user to enter a search query/text and one HTML select with options built using a vector of structs.
Ideally it should filter the vector of options in the combobox based on the search text.

I have tried implementing this a couple different ways, but the main issue I am having is that the rendered list of options doesn't update properly when the filter is applied using create_memo.

Instead, the resulting list only contains the last item in the vector regardless of the search query.

I followed the todomvc example and tried using both Signal<Vec<RcSignal<ComboBoxOption>>> as well as RcSignal<Vec<RcSignal<ComboBoxOption>>> and didn't see any difference in the output.

I've looked at several different threads that I thought looked similar but just didn't find anything that solved my issue.

Any insight would be appreciated. Thanks!

Code Snippets

let options: &ReadSignal<Vec<RcSignal<ComboBoxOption>>> =
        create_memo(context, move || query.get()).map(context, move |query| {
            let query: String = query.trim().to_lowercase();
            let result = fake_actions
                .iter()
                .map(|action| create_rc_signal(action.clone().to_combobox_option()))
                .filter(|datum| datum.get().display_text.to_lowercase().contains(&query))
                .collect::<Vec<_>>();
            let first = match result.first() {
                Some(value) => value.get().display_text.clone(),
                None => String::new(),
            };
            web_log!("{} {} {}", query, first, result.len());
            other.set(vec![first]);
            result
        });

#[derive(Debug, Clone, PartialEq, Eq)]
pub struct ComboBoxOption {
    pub id: Uuid,
    pub display_text: String,
    pub description: String,
}

#[derive(Prop)]
pub struct ComboBoxProperties<'combobox> {
    pub query: &'combobox Signal<String>,
    pub selected: &'combobox Signal<Option<Uuid>>,
    pub options: &'combobox ReadSignal<Vec<RcSignal<ComboBoxOption>>>,
    pub classes: &'combobox ReadSignal<String>,
}

#[component]
pub fn ComboBox<'combobox, G: Html>(
    context: Scope<'combobox>,
    ComboBoxProperties {
        query,
        selected,
        options,
        classes,
    }: ComboBoxProperties<'combobox>,
) -> View<G> {
    view! {context,
        div(class=classes) {
            input(type="text", bind:value=query) {}
            input(type="hidden", value=(match selected.get().as_ref() {
                Some(option) => option.to_string(),
                None => String::new(),
            }), name="actionId")
             select() {
                 Keyed(
                     iterable=options,
                     view= |context, option| view! { context,
                         option(
                             // on:click=move |event: Event| {
                             //     event.prevent_default();
                             //     selected.set(Some(option.get().id))
                             // },
                             value=option.get().id
                         ) { (option.get().display_text) }
                     },
                     key=|option| option.get().id
                 )
             }
        }
    }
}

[seanpmyers]

Just a quick update

I tested using a vector of tuples RcSignal<(Uuid, String, String)> and just a single RcSignal<String>.

The tuple resulted in the same outcome as the vector of structs, but the vector of strings worked as expected.

[seanpmyers]

Another update

I was able to achieve the desired outcome with two different implementations that did not use create_memo or create_selector.

First alternative is to use create_effect. This updates the collection whenever the query string is updated in via the html input by the user.

One caveat though is that I had to .clear() the collection before updating it with .set().

let action_options: Vec<ComboBoxOptions> = vec![]; // source data
let query: &Signal<String> = create_signal(context, String::new());
let options: &Signal<Vec<ComboBoxOption>> = create_signal(context, vec![]);
create_effect(context, move || {
        let query = query.get().trim().to_lowercase();
        options.modify().clear(); // this is required
        options.set(
            action_options
                .iter()
                .cloned()
                .filter(|option| option.display_text.to_lowercase().contains(&query))
                .collect::<Vec<_>>(),
        );
    });

Second alternative that works is just using the html input binding on:keydown

input(bind:value=query, type="text",
on:keydown=move |_: Event| { 
  let query = query.get().trim().to_lowercase();
  options.modify().clear(); // this is required
  options.set(
    action_options
      .iter()
      .cloned()
      .filter(|option| option.display_text.to_lowercase().contains(&query))
      .collect::<Vec<_>>()
  );
}) {}