[PATCH proxmox-yew-widget-toolkit 0/5] add multi-select component

[PATCH proxmox-yew-widget-toolkit 0/5] add multi-select component

[Nicolas Frey]

as it's already been used in internal GUI, put it into the yew
widget toolkit for potential future use in our products.

first patch is something independent that I noticed while looking
through the data table code. the following two pathces fix existing issues
regarding multi select in a datatable, namely to do with how selection
behaves in combination with filtering.

this multi-select implementation addresses the issue the doc comment
for the Combobox mentions, by listing the selected values in a comma
separated list and breaking at the form input's width.

proxmox-yew-widget-toolkit:

Nicolas Frey (5):
  widget: data table: simplify lookup of keys near the cursor
  widget: data table: only extend explicit select all to new rows
  widget: grid picker: keep selected records hidden by the filter
  widget: form: implement multi select field
  widget: form: combobox: update doc to point to `MultiSelect`

 src/state/data_store.rs             |   3 +
 src/state/store.rs                  |   4 +
 src/state/tree_store/mod.rs         |   4 +
 src/widget/data_table/data_table.rs |  89 +++++---
 src/widget/form/combobox.rs         |   5 +-
 src/widget/form/mod.rs              |   5 +
 src/widget/form/multi_select.rs     | 308 ++++++++++++++++++++++++++++
 src/widget/grid_picker.rs           |   2 +
 8 files changed, 391 insertions(+), 29 deletions(-)
 create mode 100644 src/widget/form/multi_select.rs


Summary over all repositories:
  8 files changed, 391 insertions(+), 29 deletions(-)

--
Generated by murpp 0.12.1

[PATCH proxmox-yew-widget-toolkit 1/5] widget: data table: simplify lookup of keys near the cursor

[Nicolas Frey]

Signed-off-by: Nicolas Frey <n.frey@proxmox.com>
---
 src/widget/data_table/data_table.rs | 25 +++++++------------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/src/widget/data_table/data_table.rs b/src/widget/data_table/data_table.rs
index 5d04173..e846522 100644
--- a/src/widget/data_table/data_table.rs
+++ b/src/widget/data_table/data_table.rs
@@ -620,27 +620,16 @@ impl<S: DataStore> PwtDataTable<S> {
     // avoid slow search by lookup up keys nearby cursor first
     fn filtered_record_pos(&self, props: &DataTable<S>, key: &Key) -> Option<usize> {
         if let Some(Cursor { pos, .. }) = &self.cursor {
-            let test_pos = *pos;
-            if let Some(record_key) = props.store.lookup_filtered_record_key(test_pos) {
-                if &record_key == key {
+            for test_pos in [Some(*pos), pos.checked_add(1), pos.checked_sub(1)]
+                .into_iter()
+                .flatten()
+            {
+                if let Some(record_key) = props.store.lookup_filtered_record_key(test_pos)
+                    && &record_key == key
+                {
                     return Some(test_pos);
                 }
             }
-
-            let test_pos = pos + 1;
-            if let Some(record_key) = props.store.lookup_filtered_record_key(test_pos) {
-                if &record_key == key {
-                    return Some(test_pos);
-                }
-            }
-            if *pos > 0 {
-                let test_pos = pos - 1;
-                if let Some(record_key) = props.store.lookup_filtered_record_key(test_pos) {
-                    if &record_key == key {
-                        return Some(test_pos);
-                    }
-                }
-            }
         }
 
         props.store.filtered_record_pos(key)
-- 
2.47.3

[PATCH proxmox-yew-widget-toolkit 2/5] widget: data table: only extend explicit select all to new rows

[Nicolas Frey]

the "all" status was also set when every visible row happened to be
selected, so clearing a filter after selecting all matching rows
selected the whole table.

remember whether select all was explicitly requested via the header,
and only then extend the selection on data changes.

Signed-off-by: Nicolas Frey <n.frey@proxmox.com>
---
 src/widget/data_table/data_table.rs | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/widget/data_table/data_table.rs b/src/widget/data_table/data_table.rs
index e846522..90f37ea 100644
--- a/src/widget/data_table/data_table.rs
+++ b/src/widget/data_table/data_table.rs
@@ -518,6 +518,8 @@ pub struct PwtDataTable<S: DataStore> {
     cursor: Option<Cursor>,
     last_select_position: Option<usize>,
     selection_status: RowSelectionStatus,
+    /// Whether all rows were explicitly selected, so that rows added later get selected too.
+    select_all_requested: bool,

     _selection_observer: Option<SelectionObserver>,

@@ -770,9 +772,11 @@ impl<S: DataStore> PwtDataTable<S> {
         }
         selection.bulk_select(keys);
         self.selection_status = RowSelectionStatus::All;
+        self.select_all_requested = true;
     }

     fn clear_selection(&mut self, props: &DataTable<S>) {
+        self.select_all_requested = false;
         if let Some(selection) = &props.selection {
             selection.clear();
         }
@@ -1200,6 +1204,7 @@ impl<S: DataStore + 'static> Component for PwtDataTable<S> {
             cursor: None,
             last_select_position: None,
             selection_status: RowSelectionStatus::Nothing,
+            select_all_requested: false,
             _selection_observer,

             active_column: 0,
@@ -1245,6 +1250,9 @@ impl<S: DataStore + 'static> Component for PwtDataTable<S> {
         match msg {
             Msg::SelectionChange => {
                 self.update_selection_status(props);
+                if self.selection_status != RowSelectionStatus::All {
+                    self.select_all_requested = false;
+                }
                 true
             }
             Msg::DataChange => {
@@ -1259,7 +1267,10 @@ impl<S: DataStore + 'static> Component for PwtDataTable<S> {
                 }
                 self.update_scroll_info(props);

-                if self.selection_status == RowSelectionStatus::All {
+                // only an explicit select all extends to new rows. deriving it from the selection
+                // status would select every row once a filter is removed, if all rows that
+                // matched the filter happened to be selected.
+                if self.select_all_requested {
                     self.select_all(props);
                 } else {
                     self.cleanup_selection(props);
--
2.47.3

[PATCH proxmox-yew-widget-toolkit 3/5] widget: grid picker: keep selected records hidden by the filter

[Nicolas Frey]

the data table drops selected records that do not match the store
filter. in a grid picker, the filter is only a search aid, so typing a
query deselected all records that did not match it.

add an opt-in flag to only drop records that are no longer in the
store, using a new function `DataStore::contains_key`, and enable it in
the grid picker.

Signed-off-by: Nicolas Frey <n.frey@proxmox.com>
---
 src/state/data_store.rs             |  3 ++
 src/state/store.rs                  |  4 +++
 src/state/tree_store/mod.rs         |  4 +++
 src/widget/data_table/data_table.rs | 51 ++++++++++++++++++++++++-----
 src/widget/grid_picker.rs           |  2 ++
 5 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/state/data_store.rs b/src/state/data_store.rs
index 90460c2..16b59ea 100644
--- a/src/state/data_store.rs
+++ b/src/state/data_store.rs
@@ -64,6 +64,9 @@ pub trait DataStore: Clone + PartialEq {
     fn filtered_record_pos(&self, key: &Key) -> Option<usize>;
     fn filtered_data_len(&self) -> usize;
 
+    /// Returns whether the store contains a record with this key, regardless of the filter.
+    fn contains_key(&self, key: &Key) -> bool;
+
     #[allow(clippy::type_complexity)]
     fn filtered_data<'a>(
         &'a self,
diff --git a/src/state/store.rs b/src/state/store.rs
index 1afe0a4..89a1ad4 100644
--- a/src/state/store.rs
+++ b/src/state/store.rs
@@ -429,6 +429,10 @@ impl<T: Clone + PartialEq + 'static> DataStore for Store<T> {
         self.filtered_data_len()
     }
 
+    fn contains_key(&self, key: &Key) -> bool {
+        self.read().record_pos(key).is_some()
+    }
+
     fn filtered_data<'a>(
         &'a self,
     ) -> Box<dyn Iterator<Item = (usize, Box<dyn DataNode<T> + 'a>)> + 'a> {
diff --git a/src/state/tree_store/mod.rs b/src/state/tree_store/mod.rs
index 5e84b8f..67f0d76 100644
--- a/src/state/tree_store/mod.rs
+++ b/src/state/tree_store/mod.rs
@@ -288,6 +288,10 @@ impl<T: Clone + PartialEq + 'static> DataStore for TreeStore<T> {
         self.filtered_data_len()
     }
 
+    fn contains_key(&self, key: &Key) -> bool {
+        self.read().lookup_node(key).is_some()
+    }
+
     fn filtered_data<'a>(
         &'a self,
     ) -> Box<dyn Iterator<Item = (usize, Box<dyn DataNode<T> + 'a>)> + 'a> {
diff --git a/src/widget/data_table/data_table.rs b/src/widget/data_table/data_table.rs
index 90f37ea..2ee8ed2 100644
--- a/src/widget/data_table/data_table.rs
+++ b/src/widget/data_table/data_table.rs
@@ -237,6 +237,14 @@ pub struct DataTable<S: DataStore> {
     #[prop_or_default]
     pub multiselect_mode: MultiSelectMode,
 
+    /// In multiselect mode, keep selected records that are hidden by the store filter.
+    ///
+    /// By default, the selection is reduced to the records that match the filter, so that
+    /// actions on the selection only affect visible rows. Enable this if the filter is only a
+    /// search aid, and must not change the selection.
+    #[prop_or_default]
+    pub keep_filtered_selection: bool,
+
     /// Table scroll callback
     #[prop_or_default]
     pub on_table_scroll: Option<Callback<Event>>,
@@ -395,6 +403,17 @@ impl<S: DataStore> DataTable<S> {
         self.allow_deselect = allow_deselect.into_prop_value();
     }
 
+    /// Builder style method to set the keep_filtered_selection flag.
+    pub fn keep_filtered_selection(mut self, keep: impl IntoPropValue<bool>) -> Self {
+        self.set_keep_filtered_selection(keep);
+        self
+    }
+
+    /// Method to set the keep_filtered_selection flag.
+    pub fn set_keep_filtered_selection(&mut self, keep: impl IntoPropValue<bool>) {
+        self.keep_filtered_selection = keep.into_prop_value();
+    }
+
     /// Builder style method to set the show_header flag.
     pub fn show_header(mut self, show_header: impl IntoPropValue<bool>) -> Self {
         self.set_show_header(show_header);
@@ -765,6 +784,9 @@ impl<S: DataStore> PwtDataTable<S> {
         }
 
         let mut keys: HashSet<Key> = HashSet::new();
+        if props.keep_filtered_selection {
+            keys.extend(selection.selected_keys());
+        }
         for pos in 0..record_count {
             if let Some(key) = props.store.lookup_filtered_record_key(pos) {
                 keys.insert(key);
@@ -797,7 +819,11 @@ impl<S: DataStore> PwtDataTable<S> {
             return;
         }
 
-        let selection_len = selection.len();
+        // only count visible rows, the selection may contain records hidden by the filter
+        let selection_len = (0..record_count)
+            .filter_map(|pos| props.store.lookup_filtered_record_key(pos))
+            .filter(|key| selection.contains(key))
+            .count();
         if record_count == selection_len {
             self.selection_status = RowSelectionStatus::All;
         } else if selection_len > 0 {
@@ -812,13 +838,22 @@ impl<S: DataStore> PwtDataTable<S> {
         if let Some(selection) = &props.selection {
             let mut selection = selection.write();
             if selection.is_multiselect() {
-                let mut keys: HashSet<Key> = HashSet::new();
-                for (_pos, node) in props.store.filtered_data() {
-                    let key = props.store.extract_key(&node.record());
-                    if selection.contains(&key) {
-                        keys.insert(key);
-                    }
-                }
+                let keys = if props.keep_filtered_selection {
+                    selection
+                        .selected_keys()
+                        .into_iter()
+                        .filter(|key| props.store.contains_key(key))
+                        .collect()
+                } else {
+                    props
+                        .store
+                        .filtered_data()
+                        .filter_map(|(_pos, node)| {
+                            let key = props.store.extract_key(&node.record());
+                            selection.contains(&key).then_some(key)
+                        })
+                        .collect()
+                };
                 selection.bulk_select(keys);
             } else if let Some(key) = selection.selected_key() {
                 if props.store.filtered_record_pos(&key).is_none() {
diff --git a/src/widget/grid_picker.rs b/src/widget/grid_picker.rs
index b40ac92..d3ac5ae 100644
--- a/src/widget/grid_picker.rs
+++ b/src/widget/grid_picker.rs
@@ -185,6 +185,8 @@ impl<S: DataStore + 'static> Component for PwtGridPicker<S> {
             .clone()
             .key(Key::from("picker-table"))
             .autoselect(false)
+            // the filter is only a search aid and must not change the selection
+            .keep_filtered_selection(true)
             .cell_configuration(CellConfiguration::new().class("pwt-datatable-cell pwt-pointer"))
             .hover(true)
             .header_focusable(false)
-- 
2.47.3

[PATCH proxmox-yew-widget-toolkit 4/5] widget: form: implement multi select field

[Nicolas Frey]

as stated in the `Combobox` documentation, its implementation does not
support a multi-select mode. add a separate widget that shows a
`GridPicker` inside a dropdown, to keep the implementations separate.

values that are not among the items, e.g. loaded from the form or left
over after the items changed, are kept as extra entries. that way they
stay visible and are not dropped on the next selection change.

Signed-off-by: Nicolas Frey <n.frey@proxmox.com>
---
 src/widget/form/mod.rs          |   5 +
 src/widget/form/multi_select.rs | 308 ++++++++++++++++++++++++++++++++
 2 files changed, 313 insertions(+)
 create mode 100644 src/widget/form/multi_select.rs

diff --git a/src/widget/form/mod.rs b/src/widget/form/mod.rs
index 2bf030d..14dbcec 100644
--- a/src/widget/form/mod.rs
+++ b/src/widget/form/mod.rs
@@ -85,3 +85,8 @@ pub use date_field::DateField;
 #[doc(hidden)]
 pub use date_field::DateFieldComp;
 pub use date_field::PlainDate;
+
+mod multi_select;
+pub use multi_select::MultiSelect;
+#[doc(hidden)]
+pub use multi_select::MultiSelectField;
diff --git a/src/widget/form/multi_select.rs b/src/widget/form/multi_select.rs
new file mode 100644
index 0000000..b8f34a5
--- /dev/null
+++ b/src/widget/form/multi_select.rs
@@ -0,0 +1,308 @@
+use std::collections::HashSet;
+use std::rc::Rc;
+
+use anyhow::{Error, bail};
+use serde_json::Value;
+
+use crate::{
+    props::{
+        ContainerBuilder, FieldBuilder, IntoOptionalRenderFn, IntoTextFilterFn, RenderFn,
+        TextFilterFn, WidgetBuilder,
+    },
+    state::{Selection, SelectionObserver, Store},
+    tr,
+    widget::{
+        Dropdown, DropdownController, GridPicker, Row,
+        data_table::{DataTable, DataTableColumn, DataTableHeader, MultiSelectMode},
+        form::{
+            ManagedField, ManagedFieldContext, ManagedFieldMaster, ManagedFieldScopeExt,
+            ManagedFieldState,
+        },
+    },
+};
+use pwt_macros::{builder, widget};
+use yew::{AttrValue, Html, Properties, html, html::IntoPropValue, virtual_dom::Key};
+
+/// MultiSelect widget
+///
+/// Allows to select multiple text options.
+///
+/// Select any number of the given items. The value is a json array of the
+/// selected items, in the order the items were passed.
+///
+/// Use [Combobox](super::Combobox) if only one option has to be
+/// selectable (single-select).
+#[widget(pwt=crate, comp=ManagedFieldMaster<MultiSelectField>, @input)]
+#[derive(Clone, Properties, PartialEq)]
+#[builder]
+pub struct MultiSelect {
+    /// The selectable items.
+    #[prop_or_default]
+    pub items: Rc<Vec<AttrValue>>,
+
+    /// The items to select unless the form is populated.
+    #[prop_or_default]
+    #[builder(IntoPropValue, into_prop_value)]
+    pub default: Vec<AttrValue>,
+
+    /// Display the output of this function instead of displaying values directly.
+    #[builder_cb(IntoOptionalRenderFn, into_optional_render_fn, AttrValue)]
+    #[prop_or_default]
+    pub render_value: Option<RenderFn<AttrValue>>,
+
+    /// Show filter
+    ///
+    /// Default behavior is to show the filter for pickers with more than 10 items.
+    #[builder(IntoPropValue, into_prop_value)]
+    #[prop_or_default]
+    pub show_filter: Option<bool>,
+
+    /// Custom filter function.
+    #[builder_cb(IntoTextFilterFn, into_text_filter_fn, AttrValue)]
+    #[prop_or_default]
+    pub filter: Option<TextFilterFn<AttrValue>>,
+}
+
+impl MultiSelect {
+    /// Create a new instance.
+    pub fn new(items: Rc<Vec<AttrValue>>) -> Self {
+        yew::props!(Self { items })
+    }
+}
+
+pub struct MultiSelectField {
+    state: ManagedFieldState,
+    store: Store<AttrValue>,
+    selection: Selection,
+    columns: Rc<Vec<DataTableHeader<AttrValue>>>,
+    /// Values the field was loaded with that are not among the items.
+    extra: Vec<AttrValue>,
+    _selection_observer: SelectionObserver,
+}
+
+crate::impl_deref_mut_property!(MultiSelectField, state, ManagedFieldState);
+
+impl MultiSelectField {
+    fn columns(props: &MultiSelect) -> Rc<Vec<DataTableHeader<AttrValue>>> {
+        let render_value = props
+            .render_value
+            .clone()
+            .unwrap_or_else(|| RenderFn::new(|item: &AttrValue| html! { item }));
+
+        Rc::new(vec![
+            DataTableColumn::<AttrValue>::selection_indicator().into(),
+            DataTableColumn::new("Value")
+                .show_menu(false)
+                .render(render_value)
+                .into(),
+        ])
+    }
+
+    fn chain_extra(&self, props: &MultiSelect) -> Vec<AttrValue> {
+        props
+            .items
+            .iter()
+            .chain(self.extra.iter())
+            .cloned()
+            .collect()
+    }
+
+    fn selected(&self, props: &MultiSelect) -> Vec<AttrValue> {
+        self.chain_extra(props)
+            .into_iter()
+            .filter(|item| self.selection.contains(&Key::from(item.as_str())))
+            .collect()
+    }
+
+    /// Adds the values of `value` that are neither items nor already known extras.
+    fn add_extra(&mut self, props: &MultiSelect, value: &Value) -> bool {
+        let unknown: Vec<AttrValue> = value
+            .as_array()
+            .into_iter()
+            .flatten()
+            .filter_map(|item| item.as_str())
+            .filter(|item| {
+                !props.items.iter().any(|known| known == item)
+                    && !self.extra.iter().any(|known| known == item)
+            })
+            .map(|item| AttrValue::from(item.to_string()))
+            .collect();
+
+        if unknown.is_empty() {
+            return false;
+        }
+        self.extra.extend(unknown);
+        self.store.set_data(self.chain_extra(props));
+        true
+    }
+}
+
+fn selected_keys(value: &Value) -> HashSet<Key> {
+    match value.as_array() {
+        Some(items) => items
+            .iter()
+            .filter_map(|item| item.as_str())
+            .map(|item| Key::from(item.to_string()))
+            .collect(),
+        None => HashSet::new(),
+    }
+}
+
+impl ManagedField for MultiSelectField {
+    type Message = ();
+    type Properties = MultiSelect;
+    type ValidateClosure = bool;
+
+    fn validation_args(props: &Self::Properties) -> Self::ValidateClosure {
+        props.input_props.required
+    }
+
+    fn validator(required: &Self::ValidateClosure, value: &Value) -> Result<Value, Error> {
+        let items = match value {
+            Value::Null => Vec::new(),
+            Value::Array(items) if items.iter().all(Value::is_string) => items.clone(),
+            _ => bail!(tr!("got wrong data type.")),
+        };
+
+        if *required && items.is_empty() {
+            bail!(tr!("Field may not be empty."));
+        }
+
+        Ok(Value::Array(items))
+    }
+
+    fn create(ctx: &ManagedFieldContext<Self>) -> Self {
+        let props = ctx.props();
+
+        let store = Store::with_extract_key(|item: &AttrValue| Key::from(item.as_str()));
+        store.set_data(props.items.as_ref().clone());
+
+        let selection = Selection::new().multiselect(true);
+        let _selection_observer = selection.add_listener(ctx.link().callback(|_| ()));
+
+        let default = Value::Array(
+            props
+                .default
+                .iter()
+                .map(|item| Value::String(item.to_string()))
+                .collect(),
+        );
+        selection.bulk_select(selected_keys(&default));
+
+        let mut this = Self {
+            state: ManagedFieldState::new(default.clone(), default.clone()),
+            store,
+            selection,
+            columns: Self::columns(props),
+            extra: Vec::new(),
+            _selection_observer,
+        };
+        this.add_extra(props, &default);
+        this
+    }
+
+    fn changed(&mut self, ctx: &ManagedFieldContext<Self>, old_props: &Self::Properties) -> bool {
+        let props = ctx.props();
+
+        if props.items != old_props.items {
+            // keep selected values that are no longer items, so they stay visible and are not
+            // dropped from the value on the next selection change
+            let selected = selected_keys(&self.value);
+            for item in old_props.items.iter() {
+                if !props.items.contains(item)
+                    && !self.extra.contains(item)
+                    && selected.contains(&Key::from(item.as_str()))
+                {
+                    self.extra.push(item.clone());
+                }
+            }
+            self.extra.retain(|item| !props.items.contains(item));
+            self.store.set_data(self.chain_extra(props));
+        }
+        // rebuild unconditionally, so items whose label loads asynchronously do
+        // not keep the label they had when the field was created
+        self.columns = Self::columns(props);
+
+        true
+    }
+
+    fn value_changed(&mut self, ctx: &ManagedFieldContext<Self>) {
+        let value = self.value.clone();
+        self.add_extra(ctx.props(), &value);
+        self.selection.bulk_select(selected_keys(&value));
+    }
+
+    fn update(&mut self, ctx: &ManagedFieldContext<Self>, _msg: Self::Message) -> bool {
+        let selected = self.selected(ctx.props());
+
+        // the selection also changes when a value is loaded,
+        // so update only what the user changed
+        let selected_set: HashSet<Key> = selected
+            .iter()
+            .map(|item| Key::from(item.to_string()))
+            .collect();
+        if selected_set == selected_keys(&self.value) {
+            return true;
+        }
+
+        let value = selected
+            .into_iter()
+            .map(|item| Value::String(item.to_string()))
+            .collect();
+
+        ctx.link().update_value(Value::Array(value));
+        true
+    }
+
+    fn view(&self, ctx: &ManagedFieldContext<Self>) -> Html {
+        let props = ctx.props();
+
+        let store = self.store.clone();
+        let selection = self.selection.clone();
+        let columns = Rc::clone(&self.columns);
+        let show_filter = props.show_filter;
+        let filter = props.filter.clone();
+        let picker = move |_controller: &DropdownController| {
+            let table = DataTable::new(Rc::clone(&columns), store.clone())
+                .striped(false)
+                .borderless(true)
+                .bordered(false)
+                .show_header(false)
+                .multiselect_mode(MultiSelectMode::Simple);
+
+            GridPicker::new(table)
+                .selection(selection.clone())
+                .show_filter(show_filter)
+                .filter(filter.clone())
+                .into()
+        };
+
+        let selected = self.selected(props);
+
+        let mut text = Row::new();
+        for (pos, item) in selected.iter().enumerate() {
+            if pos > 0 {
+                text.add_child(html! { {", "} });
+            }
+            text.add_child(match &props.render_value {
+                Some(render_value) => render_value.apply(item),
+                None => html! { item },
+            });
+        }
+        let text: Html = text.into();
+
+        Dropdown::new(picker)
+            .with_std_props(&props.std_props)
+            .with_input_props(&props.input_props)
+            .value(
+                selected
+                    .iter()
+                    .map(|item| item.to_string())
+                    .collect::<Vec<_>>()
+                    .join(","),
+            )
+            .render_value(move |_: &AttrValue| text.clone())
+            .valid(self.result.is_ok())
+            .into()
+    }
+}
-- 
2.47.3

[PATCH proxmox-yew-widget-toolkit 5/5] widget: form: combobox: update doc to point to `MultiSelect`

[Nicolas Frey]

mention it in the note about missing multi-select support, so users
find it more easily.

Signed-off-by: Nicolas Frey <n.frey@proxmox.com>
---
 src/widget/form/combobox.rs | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/widget/form/combobox.rs b/src/widget/form/combobox.rs
index 7de2906..94f997a 100644
--- a/src/widget/form/combobox.rs
+++ b/src/widget/form/combobox.rs
@@ -30,8 +30,9 @@ use pwt_macros::{builder, widget};
 /// there is not enough room to display the selected values when the combobox
 /// is collapsed. Therefore, we have not implemented the multiselect mode.
 ///
-/// Please consider using a flat grid instead. If there are few choices,
-/// a segmented button may also be an option.
+/// If only a few values are expected to be selected at once, consider using
+/// [MultiSelect](super::MultiSelect). Otherwise, please consider using a flat grid
+/// instead. If there are few choices, a segmented button may also be an option.
 #[widget(pwt=crate, comp=PwtCombobox, @input)]
 #[derive(Clone, PartialEq, Properties)]
 #[builder]
-- 
2.47.3

Re: [PATCH proxmox-yew-widget-toolkit 0/5] add multi-select component

[Dominik Csapak]

Thanks for the patches,

i wrote some comments on the individual patches

On 10/28/26 4:15 PM, Nicolas Frey wrote:
> as it's already been used in internal GUI, put it into the yew
> widget toolkit for potential future use in our products.
> 
> first patch is something independent that I noticed while looking
> through the data table code. the following two pathces fix existing issues
> regarding multi select in a datatable, namely to do with how selection
> behaves in combination with filtering.
> 
> this multi-select implementation addresses the issue the doc comment
> for the Combobox mentions, by listing the selected values in a comma
> separated list and breaking at the form input's width.
> 
> proxmox-yew-widget-toolkit:
> 
> Nicolas Frey (5):
>    widget: data table: simplify lookup of keys near the cursor
>    widget: data table: only extend explicit select all to new rows
>    widget: grid picker: keep selected records hidden by the filter
>    widget: form: implement multi select field
>    widget: form: combobox: update doc to point to `MultiSelect`
> 
>   src/state/data_store.rs             |   3 +
>   src/state/store.rs                  |   4 +
>   src/state/tree_store/mod.rs         |   4 +
>   src/widget/data_table/data_table.rs |  89 +++++---
>   src/widget/form/combobox.rs         |   5 +-
>   src/widget/form/mod.rs              |   5 +
>   src/widget/form/multi_select.rs     | 308 ++++++++++++++++++++++++++++
>   src/widget/grid_picker.rs           |   2 +
>   8 files changed, 391 insertions(+), 29 deletions(-)
>   create mode 100644 src/widget/form/multi_select.rs
> 
> 
> Summary over all repositories:
>    8 files changed, 391 insertions(+), 29 deletions(-)
> 
> --
> Generated by murpp 0.12.1

Re: [PATCH proxmox-yew-widget-toolkit 3/5] widget: grid picker: keep selected records hidden by the filter

[Dominik Csapak]

comments inline

On 10/28/26 4:15 PM, Nicolas Frey wrote:
> the data table drops selected records that do not match the store
> filter. in a grid picker, the filter is only a search aid, so typing a
> query deselected all records that did not match it.
> 
> add an opt-in flag to only drop records that are no longer in the
> store, using a new function `DataStore::contains_key`, and enable it in
> the grid picker.
> 
> Signed-off-by: Nicolas Frey <n.frey@proxmox.com>
> ---
>   src/state/data_store.rs             |  3 ++
>   src/state/store.rs                  |  4 +++
>   src/state/tree_store/mod.rs         |  4 +++
>   src/widget/data_table/data_table.rs | 51 ++++++++++++++++++++++++-----
>   src/widget/grid_picker.rs           |  2 ++
>   5 files changed, 56 insertions(+), 8 deletions(-)
> 
> diff --git a/src/state/data_store.rs b/src/state/data_store.rs
> index 90460c2..16b59ea 100644
> --- a/src/state/data_store.rs
> +++ b/src/state/data_store.rs
> @@ -64,6 +64,9 @@ pub trait DataStore: Clone + PartialEq {
>       fn filtered_record_pos(&self, key: &Key) -> Option<usize>;
>       fn filtered_data_len(&self) -> usize;
>   
> +    /// Returns whether the store contains a record with this key, regardless of the filter.
> +    fn contains_key(&self, key: &Key) -> bool;
> +

This is a bit too narrow for my taste for such an important part of
the interface. I'd probably like more 'unfiltered' methods
that mirror the 'filtered' ones. with that, your contains_key
is just a 'unfiltered_record_pos(_).is_some()'

Also even when adding only the 'contains' method, i'd add the
'unfiltered' part, otherwise this can be misunderstood without
looking at the docs.

>       #[allow(clippy::type_complexity)]
>       fn filtered_data<'a>(
>           &'a self,
> diff --git a/src/state/store.rs b/src/state/store.rs
> index 1afe0a4..89a1ad4 100644
> --- a/src/state/store.rs
> +++ b/src/state/store.rs
> @@ -429,6 +429,10 @@ impl<T: Clone + PartialEq + 'static> DataStore for Store<T> {
>           self.filtered_data_len()
>       }
>   
> +    fn contains_key(&self, key: &Key) -> bool {
> +        self.read().record_pos(key).is_some()
> +    }
> +
>       fn filtered_data<'a>(
>           &'a self,
>       ) -> Box<dyn Iterator<Item = (usize, Box<dyn DataNode<T> + 'a>)> + 'a> {
> diff --git a/src/state/tree_store/mod.rs b/src/state/tree_store/mod.rs
> index 5e84b8f..67f0d76 100644
> --- a/src/state/tree_store/mod.rs
> +++ b/src/state/tree_store/mod.rs
> @@ -288,6 +288,10 @@ impl<T: Clone + PartialEq + 'static> DataStore for TreeStore<T> {
>           self.filtered_data_len()
>       }
>   
> +    fn contains_key(&self, key: &Key) -> bool {
> +        self.read().lookup_node(key).is_some()
> +    }
> +
>       fn filtered_data<'a>(
>           &'a self,
>       ) -> Box<dyn Iterator<Item = (usize, Box<dyn DataNode<T> + 'a>)> + 'a> {
> diff --git a/src/widget/data_table/data_table.rs b/src/widget/data_table/data_table.rs
> index 90f37ea..2ee8ed2 100644
> --- a/src/widget/data_table/data_table.rs
> +++ b/src/widget/data_table/data_table.rs
> @@ -237,6 +237,14 @@ pub struct DataTable<S: DataStore> {
>       #[prop_or_default]
>       pub multiselect_mode: MultiSelectMode,
>   
> +    /// In multiselect mode, keep selected records that are hidden by the store filter.
> +    ///
> +    /// By default, the selection is reduced to the records that match the filter, so that
> +    /// actions on the selection only affect visible rows. Enable this if the filter is only a
> +    /// search aid, and must not change the selection.
> +    #[prop_or_default]
> +    pub keep_filtered_selection: bool,
> +


With this i asked myself: 'what is a filtered selection' ?

I think something like 'keep_selection_when_filtered' would be more
descriptive (even though it's longer).


>       /// Table scroll callback
>       #[prop_or_default]
>       pub on_table_scroll: Option<Callback<Event>>,
> @@ -395,6 +403,17 @@ impl<S: DataStore> DataTable<S> {
>           self.allow_deselect = allow_deselect.into_prop_value();
>       }
>   
> +    /// Builder style method to set the keep_filtered_selection flag.
> +    pub fn keep_filtered_selection(mut self, keep: impl IntoPropValue<bool>) -> Self {
> +        self.set_keep_filtered_selection(keep);
> +        self
> +    }
> +
> +    /// Method to set the keep_filtered_selection flag.
> +    pub fn set_keep_filtered_selection(&mut self, keep: impl IntoPropValue<bool>) {
> +        self.keep_filtered_selection = keep.into_prop_value();
> +    }
> +

these could be automatically implemented by using the #[builder] macro

>       /// Builder style method to set the show_header flag.
>       pub fn show_header(mut self, show_header: impl IntoPropValue<bool>) -> Self {
>           self.set_show_header(show_header);
> @@ -765,6 +784,9 @@ impl<S: DataStore> PwtDataTable<S> {
>           }
>   
>           let mut keys: HashSet<Key> = HashSet::new();
> +        if props.keep_filtered_selection {
> +            keys.extend(selection.selected_keys());
> +        }
>           for pos in 0..record_count {
>               if let Some(key) = props.store.lookup_filtered_record_key(pos) {
>                   keys.insert(key);
> @@ -797,7 +819,11 @@ impl<S: DataStore> PwtDataTable<S> {
>               return;
>           }
>   
> -        let selection_len = selection.len();
> +        // only count visible rows, the selection may contain records hidden by the filter
> +        let selection_len = (0..record_count)
> +            .filter_map(|pos| props.store.lookup_filtered_record_key(pos))
> +            .filter(|key| selection.contains(key))
> +            .count();

since the selection is basically a hashset, we could think
of exposing a the usual set operations too (intersect, difference, etc)
and offer a 'filtered_get_keys' that returns a hashset of the existing
(visible) keys

nothing wrong with this code here, per se but exposing more of the
selection might benefit us in the future too...

>           if record_count == selection_len {
>               self.selection_status = RowSelectionStatus::All;
>           } else if selection_len > 0 {
> @@ -812,13 +838,22 @@ impl<S: DataStore> PwtDataTable<S> {
>           if let Some(selection) = &props.selection {
>               let mut selection = selection.write();
>               if selection.is_multiselect() {
> -                let mut keys: HashSet<Key> = HashSet::new();
> -                for (_pos, node) in props.store.filtered_data() {
> -                    let key = props.store.extract_key(&node.record());
> -                    if selection.contains(&key) {
> -                        keys.insert(key);
> -                    }
> -                }
> +                let keys = if props.keep_filtered_selection {
> +                    selection
> +                        .selected_keys()
> +                        .into_iter()
> +                        .filter(|key| props.store.contains_key(key))
> +                        .collect()
> +                } else {
> +                    props
> +                        .store
> +                        .filtered_data()
> +                        .filter_map(|(_pos, node)| {
> +                            let key = props.store.extract_key(&node.record());
> +                            selection.contains(&key).then_some(key)
> +                        })
> +                        .collect()
> +                };
>                   selection.bulk_select(keys);
>               } else if let Some(key) = selection.selected_key() {
>                   if props.store.filtered_record_pos(&key).is_none() {
> diff --git a/src/widget/grid_picker.rs b/src/widget/grid_picker.rs
> index b40ac92..d3ac5ae 100644
> --- a/src/widget/grid_picker.rs
> +++ b/src/widget/grid_picker.rs
> @@ -185,6 +185,8 @@ impl<S: DataStore + 'static> Component for PwtGridPicker<S> {
>               .clone()
>               .key(Key::from("picker-table"))
>               .autoselect(false)
> +            // the filter is only a search aid and must not change the selection
> +            .keep_filtered_selection(true)
>               .cell_configuration(CellConfiguration::new().class("pwt-datatable-cell pwt-pointer"))
>               .hover(true)
>               .header_focusable(false)

Re: [PATCH proxmox-yew-widget-toolkit 2/5] widget: data table: only extend explicit select all to new rows

[Dominik Csapak]

even that i find too much.

A pattern I for example use often in UIs (even in our Extjs ones):

* filter by some pattern
* press 'select all' ( all visible are selected )
* unfilter
* select some others too

this would not work with this.

Maybe we need to have some different modes for select all?
* Automatic (status-quo, as default?)
* All (your patch)
* Visible (my use case from above)



On 10/28/26 4:15 PM, Nicolas Frey wrote:
> the "all" status was also set when every visible row happened to be
> selected, so clearing a filter after selecting all matching rows
> selected the whole table.
> 
> remember whether select all was explicitly requested via the header,
> and only then extend the selection on data changes.
> 
> Signed-off-by: Nicolas Frey <n.frey@proxmox.com>
> ---
>   src/widget/data_table/data_table.rs | 13 ++++++++++++-
>   1 file changed, 12 insertions(+), 1 deletion(-)
> 
> diff --git a/src/widget/data_table/data_table.rs b/src/widget/data_table/data_table.rs
> index e846522..90f37ea 100644
> --- a/src/widget/data_table/data_table.rs
> +++ b/src/widget/data_table/data_table.rs
> @@ -518,6 +518,8 @@ pub struct PwtDataTable<S: DataStore> {
>       cursor: Option<Cursor>,
>       last_select_position: Option<usize>,
>       selection_status: RowSelectionStatus,
> +    /// Whether all rows were explicitly selected, so that rows added later get selected too.
> +    select_all_requested: bool,
> 
>       _selection_observer: Option<SelectionObserver>,
> 
> @@ -770,9 +772,11 @@ impl<S: DataStore> PwtDataTable<S> {
>           }
>           selection.bulk_select(keys);
>           self.selection_status = RowSelectionStatus::All;
> +        self.select_all_requested = true;
>       }
> 
>       fn clear_selection(&mut self, props: &DataTable<S>) {
> +        self.select_all_requested = false;
>           if let Some(selection) = &props.selection {
>               selection.clear();
>           }
> @@ -1200,6 +1204,7 @@ impl<S: DataStore + 'static> Component for PwtDataTable<S> {
>               cursor: None,
>               last_select_position: None,
>               selection_status: RowSelectionStatus::Nothing,
> +            select_all_requested: false,
>               _selection_observer,
> 
>               active_column: 0,
> @@ -1245,6 +1250,9 @@ impl<S: DataStore + 'static> Component for PwtDataTable<S> {
>           match msg {
>               Msg::SelectionChange => {
>                   self.update_selection_status(props);
> +                if self.selection_status != RowSelectionStatus::All {
> +                    self.select_all_requested = false;
> +                }
>                   true
>               }
>               Msg::DataChange => {
> @@ -1259,7 +1267,10 @@ impl<S: DataStore + 'static> Component for PwtDataTable<S> {
>                   }
>                   self.update_scroll_info(props);
> 
> -                if self.selection_status == RowSelectionStatus::All {
> +                // only an explicit select all extends to new rows. deriving it from the selection
> +                // status would select every row once a filter is removed, if all rows that
> +                // matched the filter happened to be selected.
> +                if self.select_all_requested {
>                       self.select_all(props);
>                   } else {
>                       self.cleanup_selection(props);
> --
> 2.47.3

Re: [PATCH proxmox-yew-widget-toolkit 4/5] widget: form: implement multi select field

[Dominik Csapak]

some high level comments:

I'd really like for this to follow the existing conventions for our
other fields. It's Basically a Combobox but with multiselect, so I'd
like to see either:

* make it an option in combobox  `.multiselect(true)`
* or keep it separate but implement the same interface (with_item,
triggers, etc.)

(wheatever is easier)

If it's a separate field, something like 'multicombobox' would
maybe be more fitting? (to convey the combobox base)

On 10/28/26 4:15 PM, Nicolas Frey wrote:
> as stated in the `Combobox` documentation, its implementation does not
> support a multi-select mode. add a separate widget that shows a
> `GridPicker` inside a dropdown, to keep the implementations separate.
> 
> values that are not among the items, e.g. loaded from the form or left
> over after the items changed, are kept as extra entries. that way they
> stay visible and are not dropped on the next selection change.
> 
> Signed-off-by: Nicolas Frey <n.frey@proxmox.com>
> ---
>   src/widget/form/mod.rs          |   5 +
>   src/widget/form/multi_select.rs | 308 ++++++++++++++++++++++++++++++++
>   2 files changed, 313 insertions(+)
>   create mode 100644 src/widget/form/multi_select.rs
> 
> diff --git a/src/widget/form/mod.rs b/src/widget/form/mod.rs
> index 2bf030d..14dbcec 100644
> --- a/src/widget/form/mod.rs
> +++ b/src/widget/form/mod.rs
> @@ -85,3 +85,8 @@ pub use date_field::DateField;
>   #[doc(hidden)]
>   pub use date_field::DateFieldComp;
>   pub use date_field::PlainDate;
> +
> +mod multi_select;
> +pub use multi_select::MultiSelect;
> +#[doc(hidden)]
> +pub use multi_select::MultiSelectField;
> diff --git a/src/widget/form/multi_select.rs b/src/widget/form/multi_select.rs
> new file mode 100644
> index 0000000..b8f34a5
> --- /dev/null
> +++ b/src/widget/form/multi_select.rs
> @@ -0,0 +1,308 @@
> +use std::collections::HashSet;
> +use std::rc::Rc;
> +
> +use anyhow::{Error, bail};
> +use serde_json::Value;
> +
> +use crate::{
> +    props::{
> +        ContainerBuilder, FieldBuilder, IntoOptionalRenderFn, IntoTextFilterFn, RenderFn,
> +        TextFilterFn, WidgetBuilder,
> +    },
> +    state::{Selection, SelectionObserver, Store},
> +    tr,
> +    widget::{
> +        Dropdown, DropdownController, GridPicker, Row,
> +        data_table::{DataTable, DataTableColumn, DataTableHeader, MultiSelectMode},
> +        form::{
> +            ManagedField, ManagedFieldContext, ManagedFieldMaster, ManagedFieldScopeExt,
> +            ManagedFieldState,
> +        },
> +    },
> +};
> +use pwt_macros::{builder, widget};
> +use yew::{AttrValue, Html, Properties, html, html::IntoPropValue, virtual_dom::Key};
> +
> +/// MultiSelect widget
> +///
> +/// Allows to select multiple text options.
> +///
> +/// Select any number of the given items. The value is a json array of the
> +/// selected items, in the order the items were passed.
> +///
> +/// Use [Combobox](super::Combobox) if only one option has to be
> +/// selectable (single-select).
> +#[widget(pwt=crate, comp=ManagedFieldMaster<MultiSelectField>, @input)]
> +#[derive(Clone, Properties, PartialEq)]
> +#[builder]
> +pub struct MultiSelect {
> +    /// The selectable items.
> +    #[prop_or_default]
> +    pub items: Rc<Vec<AttrValue>>,
> +
> +    /// The items to select unless the form is populated.
> +    #[prop_or_default]
> +    #[builder(IntoPropValue, into_prop_value)]
> +    pub default: Vec<AttrValue>,
> +
> +    /// Display the output of this function instead of displaying values directly.
> +    #[builder_cb(IntoOptionalRenderFn, into_optional_render_fn, AttrValue)]
> +    #[prop_or_default]
> +    pub render_value: Option<RenderFn<AttrValue>>,
> +
> +    /// Show filter
> +    ///
> +    /// Default behavior is to show the filter for pickers with more than 10 items.
> +    #[builder(IntoPropValue, into_prop_value)]
> +    #[prop_or_default]
> +    pub show_filter: Option<bool>,
> +
> +    /// Custom filter function.
> +    #[builder_cb(IntoTextFilterFn, into_text_filter_fn, AttrValue)]
> +    #[prop_or_default]
> +    pub filter: Option<TextFilterFn<AttrValue>>,
> +}
> +
> +impl MultiSelect {
> +    /// Create a new instance.
> +    pub fn new(items: Rc<Vec<AttrValue>>) -> Self {
> +        yew::props!(Self { items })
> +    }
> +}
> +
> +pub struct MultiSelectField {
> +    state: ManagedFieldState,
> +    store: Store<AttrValue>,
> +    selection: Selection,
> +    columns: Rc<Vec<DataTableHeader<AttrValue>>>,
> +    /// Values the field was loaded with that are not among the items.
> +    extra: Vec<AttrValue>,
> +    _selection_observer: SelectionObserver,
> +}
> +
> +crate::impl_deref_mut_property!(MultiSelectField, state, ManagedFieldState);
> +
> +impl MultiSelectField {
> +    fn columns(props: &MultiSelect) -> Rc<Vec<DataTableHeader<AttrValue>>> {
> +        let render_value = props
> +            .render_value
> +            .clone()
> +            .unwrap_or_else(|| RenderFn::new(|item: &AttrValue| html! { item }));
> +
> +        Rc::new(vec![
> +            DataTableColumn::<AttrValue>::selection_indicator().into(),
> +            DataTableColumn::new("Value")
> +                .show_menu(false)
> +                .render(render_value)
> +                .into(),
> +        ])
> +    }
> +
> +    fn chain_extra(&self, props: &MultiSelect) -> Vec<AttrValue> {
> +        props
> +            .items
> +            .iter()
> +            .chain(self.extra.iter())
> +            .cloned()
> +            .collect()
> +    }
> +
> +    fn selected(&self, props: &MultiSelect) -> Vec<AttrValue> {
> +        self.chain_extra(props)
> +            .into_iter()
> +            .filter(|item| self.selection.contains(&Key::from(item.as_str())))
> +            .collect()
> +    }
> +
> +    /// Adds the values of `value` that are neither items nor already known extras.
> +    fn add_extra(&mut self, props: &MultiSelect, value: &Value) -> bool {
> +        let unknown: Vec<AttrValue> = value
> +            .as_array()
> +            .into_iter()
> +            .flatten()
> +            .filter_map(|item| item.as_str())
> +            .filter(|item| {
> +                !props.items.iter().any(|known| known == item)
> +                    && !self.extra.iter().any(|known| known == item)
> +            })
> +            .map(|item| AttrValue::from(item.to_string()))
> +            .collect();
> +
> +        if unknown.is_empty() {
> +            return false;
> +        }
> +        self.extra.extend(unknown);
> +        self.store.set_data(self.chain_extra(props));
> +        true
> +    }
> +}
> +
> +fn selected_keys(value: &Value) -> HashSet<Key> {
> +    match value.as_array() {
> +        Some(items) => items
> +            .iter()
> +            .filter_map(|item| item.as_str())
> +            .map(|item| Key::from(item.to_string()))
> +            .collect(),
> +        None => HashSet::new(),
> +    }
> +}
> +
> +impl ManagedField for MultiSelectField {
> +    type Message = ();
> +    type Properties = MultiSelect;
> +    type ValidateClosure = bool;
> +
> +    fn validation_args(props: &Self::Properties) -> Self::ValidateClosure {
> +        props.input_props.required
> +    }
> +
> +    fn validator(required: &Self::ValidateClosure, value: &Value) -> Result<Value, Error> {
> +        let items = match value {
> +            Value::Null => Vec::new(),
> +            Value::Array(items) if items.iter().all(Value::is_string) => items.clone(),
> +            _ => bail!(tr!("got wrong data type.")),
> +        };
> +
> +        if *required && items.is_empty() {
> +            bail!(tr!("Field may not be empty."));
> +        }
> +
> +        Ok(Value::Array(items))
> +    }
> +
> +    fn create(ctx: &ManagedFieldContext<Self>) -> Self {
> +        let props = ctx.props();
> +
> +        let store = Store::with_extract_key(|item: &AttrValue| Key::from(item.as_str()));
> +        store.set_data(props.items.as_ref().clone());
> +
> +        let selection = Selection::new().multiselect(true);
> +        let _selection_observer = selection.add_listener(ctx.link().callback(|_| ()));
> +
> +        let default = Value::Array(
> +            props
> +                .default
> +                .iter()
> +                .map(|item| Value::String(item.to_string()))
> +                .collect(),
> +        );
> +        selection.bulk_select(selected_keys(&default));
> +
> +        let mut this = Self {
> +            state: ManagedFieldState::new(default.clone(), default.clone()),
> +            store,
> +            selection,
> +            columns: Self::columns(props),
> +            extra: Vec::new(),
> +            _selection_observer,
> +        };
> +        this.add_extra(props, &default);
> +        this
> +    }
> +
> +    fn changed(&mut self, ctx: &ManagedFieldContext<Self>, old_props: &Self::Properties) -> bool {
> +        let props = ctx.props();
> +
> +        if props.items != old_props.items {
> +            // keep selected values that are no longer items, so they stay visible and are not
> +            // dropped from the value on the next selection change
> +            let selected = selected_keys(&self.value);
> +            for item in old_props.items.iter() {
> +                if !props.items.contains(item)
> +                    && !self.extra.contains(item)
> +                    && selected.contains(&Key::from(item.as_str()))
> +                {
> +                    self.extra.push(item.clone());
> +                }
> +            }
> +            self.extra.retain(|item| !props.items.contains(item));
> +            self.store.set_data(self.chain_extra(props));
> +        }
> +        // rebuild unconditionally, so items whose label loads asynchronously do
> +        // not keep the label they had when the field was created
> +        self.columns = Self::columns(props);
> +
> +        true
> +    }
> +
> +    fn value_changed(&mut self, ctx: &ManagedFieldContext<Self>) {
> +        let value = self.value.clone();
> +        self.add_extra(ctx.props(), &value);
> +        self.selection.bulk_select(selected_keys(&value));
> +    }
> +
> +    fn update(&mut self, ctx: &ManagedFieldContext<Self>, _msg: Self::Message) -> bool {
> +        let selected = self.selected(ctx.props());
> +
> +        // the selection also changes when a value is loaded,
> +        // so update only what the user changed
> +        let selected_set: HashSet<Key> = selected
> +            .iter()
> +            .map(|item| Key::from(item.to_string()))
> +            .collect();
> +        if selected_set == selected_keys(&self.value) {
> +            return true;
> +        }
> +
> +        let value = selected
> +            .into_iter()
> +            .map(|item| Value::String(item.to_string()))
> +            .collect();
> +
> +        ctx.link().update_value(Value::Array(value));
> +        true
> +    }
> +
> +    fn view(&self, ctx: &ManagedFieldContext<Self>) -> Html {
> +        let props = ctx.props();
> +
> +        let store = self.store.clone();
> +        let selection = self.selection.clone();
> +        let columns = Rc::clone(&self.columns);
> +        let show_filter = props.show_filter;
> +        let filter = props.filter.clone();
> +        let picker = move |_controller: &DropdownController| {
> +            let table = DataTable::new(Rc::clone(&columns), store.clone())
> +                .striped(false)
> +                .borderless(true)
> +                .bordered(false)
> +                .show_header(false)
> +                .multiselect_mode(MultiSelectMode::Simple);
> +
> +            GridPicker::new(table)
> +                .selection(selection.clone())
> +                .show_filter(show_filter)
> +                .filter(filter.clone())
> +                .into()
> +        };
> +
> +        let selected = self.selected(props);
> +
> +        let mut text = Row::new();
> +        for (pos, item) in selected.iter().enumerate() {
> +            if pos > 0 {
> +                text.add_child(html! { {", "} });
> +            }
> +            text.add_child(match &props.render_value {
> +                Some(render_value) => render_value.apply(item),
> +                None => html! { item },
> +            });
> +        }
> +        let text: Html = text.into();
> +
> +        Dropdown::new(picker)
> +            .with_std_props(&props.std_props)
> +            .with_input_props(&props.input_props)
> +            .value(
> +                selected
> +                    .iter()
> +                    .map(|item| item.to_string())
> +                    .collect::<Vec<_>>()
> +                    .join(","),
> +            )
> +            .render_value(move |_: &AttrValue| text.clone())
> +            .valid(self.result.is_ok())
> +            .into()
> +    }
> +}

Re: [PATCH proxmox-yew-widget-toolkit 5/5] widget: form: combobox: update doc to point to `MultiSelect`

[Dominik Csapak]

i would fold this patch into the previous patch

On 10/28/26 4:15 PM, Nicolas Frey wrote:
> mention it in the note about missing multi-select support, so users
> find it more easily.
> 
> Signed-off-by: Nicolas Frey <n.frey@proxmox.com>
> ---
>   src/widget/form/combobox.rs | 5 +++--
>   1 file changed, 3 insertions(+), 2 deletions(-)
> 
> diff --git a/src/widget/form/combobox.rs b/src/widget/form/combobox.rs
> index 7de2906..94f997a 100644
> --- a/src/widget/form/combobox.rs
> +++ b/src/widget/form/combobox.rs
> @@ -30,8 +30,9 @@ use pwt_macros::{builder, widget};
>   /// there is not enough room to display the selected values when the combobox
>   /// is collapsed. Therefore, we have not implemented the multiselect mode.
>   ///
> -/// Please consider using a flat grid instead. If there are few choices,
> -/// a segmented button may also be an option.
> +/// If only a few values are expected to be selected at once, consider using
> +/// [MultiSelect](super::MultiSelect). Otherwise, please consider using a flat grid
> +/// instead. If there are few choices, a segmented button may also be an option.
>   #[widget(pwt=crate, comp=PwtCombobox, @input)]
>   #[derive(Clone, PartialEq, Properties)]
>   #[builder]

Re: [PATCH proxmox-yew-widget-toolkit 1/5] widget: data table: simplify lookup of keys near the cursor

[Dominik Csapak]

Reviewed-by: Dominik Csapak <d.csapak@proxmox.com>

On 10/28/26 4:15 PM, Nicolas Frey wrote:
> Signed-off-by: Nicolas Frey <n.frey@proxmox.com>
> ---
>   src/widget/data_table/data_table.rs | 25 +++++++------------------
>   1 file changed, 7 insertions(+), 18 deletions(-)
> 
> diff --git a/src/widget/data_table/data_table.rs b/src/widget/data_table/data_table.rs
> index 5d04173..e846522 100644
> --- a/src/widget/data_table/data_table.rs
> +++ b/src/widget/data_table/data_table.rs
> @@ -620,27 +620,16 @@ impl<S: DataStore> PwtDataTable<S> {
>       // avoid slow search by lookup up keys nearby cursor first
>       fn filtered_record_pos(&self, props: &DataTable<S>, key: &Key) -> Option<usize> {
>           if let Some(Cursor { pos, .. }) = &self.cursor {
> -            let test_pos = *pos;
> -            if let Some(record_key) = props.store.lookup_filtered_record_key(test_pos) {
> -                if &record_key == key {
> +            for test_pos in [Some(*pos), pos.checked_add(1), pos.checked_sub(1)]
> +                .into_iter()
> +                .flatten()
> +            {
> +                if let Some(record_key) = props.store.lookup_filtered_record_key(test_pos)
> +                    && &record_key == key
> +                {
>                       return Some(test_pos);
>                   }
>               }
> -
> -            let test_pos = pos + 1;
> -            if let Some(record_key) = props.store.lookup_filtered_record_key(test_pos) {
> -                if &record_key == key {
> -                    return Some(test_pos);
> -                }
> -            }
> -            if *pos > 0 {
> -                let test_pos = pos - 1;
> -                if let Some(record_key) = props.store.lookup_filtered_record_key(test_pos) {
> -                    if &record_key == key {
> -                        return Some(test_pos);
> -                    }
> -                }
> -            }
>           }
>   
>           props.store.filtered_record_pos(key)

Re: [PATCH proxmox-yew-widget-toolkit 4/5] widget: form: implement multi select field

[Dominik Csapak]

another thing i forgot to write in my previous message:

Is it intended for the field to grow when many items are selected?

I can imagine that his breaks some ui layout depending on where
it's located...

On 10/28/26 4:15 PM, Nicolas Frey wrote:
> as stated in the `Combobox` documentation, its implementation does not
> support a multi-select mode. add a separate widget that shows a
> `GridPicker` inside a dropdown, to keep the implementations separate.
> 
> values that are not among the items, e.g. loaded from the form or left
> over after the items changed, are kept as extra entries. that way they
> stay visible and are not dropped on the next selection change.
> 
> Signed-off-by: Nicolas Frey <n.frey@proxmox.com>
> ---
>   src/widget/form/mod.rs          |   5 +
>   src/widget/form/multi_select.rs | 308 ++++++++++++++++++++++++++++++++
>   2 files changed, 313 insertions(+)
>   create mode 100644 src/widget/form/multi_select.rs
> 
> diff --git a/src/widget/form/mod.rs b/src/widget/form/mod.rs
> index 2bf030d..14dbcec 100644
> --- a/src/widget/form/mod.rs
> +++ b/src/widget/form/mod.rs
> @@ -85,3 +85,8 @@ pub use date_field::DateField;
>   #[doc(hidden)]
>   pub use date_field::DateFieldComp;
>   pub use date_field::PlainDate;
> +
> +mod multi_select;
> +pub use multi_select::MultiSelect;
> +#[doc(hidden)]
> +pub use multi_select::MultiSelectField;
> diff --git a/src/widget/form/multi_select.rs b/src/widget/form/multi_select.rs
> new file mode 100644
> index 0000000..b8f34a5
> --- /dev/null
> +++ b/src/widget/form/multi_select.rs
> @@ -0,0 +1,308 @@
> +use std::collections::HashSet;
> +use std::rc::Rc;
> +
> +use anyhow::{Error, bail};
> +use serde_json::Value;
> +
> +use crate::{
> +    props::{
> +        ContainerBuilder, FieldBuilder, IntoOptionalRenderFn, IntoTextFilterFn, RenderFn,
> +        TextFilterFn, WidgetBuilder,
> +    },
> +    state::{Selection, SelectionObserver, Store},
> +    tr,
> +    widget::{
> +        Dropdown, DropdownController, GridPicker, Row,
> +        data_table::{DataTable, DataTableColumn, DataTableHeader, MultiSelectMode},
> +        form::{
> +            ManagedField, ManagedFieldContext, ManagedFieldMaster, ManagedFieldScopeExt,
> +            ManagedFieldState,
> +        },
> +    },
> +};
> +use pwt_macros::{builder, widget};
> +use yew::{AttrValue, Html, Properties, html, html::IntoPropValue, virtual_dom::Key};
> +
> +/// MultiSelect widget
> +///
> +/// Allows to select multiple text options.
> +///
> +/// Select any number of the given items. The value is a json array of the
> +/// selected items, in the order the items were passed.
> +///
> +/// Use [Combobox](super::Combobox) if only one option has to be
> +/// selectable (single-select).
> +#[widget(pwt=crate, comp=ManagedFieldMaster<MultiSelectField>, @input)]
> +#[derive(Clone, Properties, PartialEq)]
> +#[builder]
> +pub struct MultiSelect {
> +    /// The selectable items.
> +    #[prop_or_default]
> +    pub items: Rc<Vec<AttrValue>>,
> +
> +    /// The items to select unless the form is populated.
> +    #[prop_or_default]
> +    #[builder(IntoPropValue, into_prop_value)]
> +    pub default: Vec<AttrValue>,
> +
> +    /// Display the output of this function instead of displaying values directly.
> +    #[builder_cb(IntoOptionalRenderFn, into_optional_render_fn, AttrValue)]
> +    #[prop_or_default]
> +    pub render_value: Option<RenderFn<AttrValue>>,
> +
> +    /// Show filter
> +    ///
> +    /// Default behavior is to show the filter for pickers with more than 10 items.
> +    #[builder(IntoPropValue, into_prop_value)]
> +    #[prop_or_default]
> +    pub show_filter: Option<bool>,
> +
> +    /// Custom filter function.
> +    #[builder_cb(IntoTextFilterFn, into_text_filter_fn, AttrValue)]
> +    #[prop_or_default]
> +    pub filter: Option<TextFilterFn<AttrValue>>,
> +}
> +
> +impl MultiSelect {
> +    /// Create a new instance.
> +    pub fn new(items: Rc<Vec<AttrValue>>) -> Self {
> +        yew::props!(Self { items })
> +    }
> +}
> +
> +pub struct MultiSelectField {
> +    state: ManagedFieldState,
> +    store: Store<AttrValue>,
> +    selection: Selection,
> +    columns: Rc<Vec<DataTableHeader<AttrValue>>>,
> +    /// Values the field was loaded with that are not among the items.
> +    extra: Vec<AttrValue>,
> +    _selection_observer: SelectionObserver,
> +}
> +
> +crate::impl_deref_mut_property!(MultiSelectField, state, ManagedFieldState);
> +
> +impl MultiSelectField {
> +    fn columns(props: &MultiSelect) -> Rc<Vec<DataTableHeader<AttrValue>>> {
> +        let render_value = props
> +            .render_value
> +            .clone()
> +            .unwrap_or_else(|| RenderFn::new(|item: &AttrValue| html! { item }));
> +
> +        Rc::new(vec![
> +            DataTableColumn::<AttrValue>::selection_indicator().into(),
> +            DataTableColumn::new("Value")
> +                .show_menu(false)
> +                .render(render_value)
> +                .into(),
> +        ])
> +    }
> +
> +    fn chain_extra(&self, props: &MultiSelect) -> Vec<AttrValue> {
> +        props
> +            .items
> +            .iter()
> +            .chain(self.extra.iter())
> +            .cloned()
> +            .collect()
> +    }
> +
> +    fn selected(&self, props: &MultiSelect) -> Vec<AttrValue> {
> +        self.chain_extra(props)
> +            .into_iter()
> +            .filter(|item| self.selection.contains(&Key::from(item.as_str())))
> +            .collect()
> +    }
> +
> +    /// Adds the values of `value` that are neither items nor already known extras.
> +    fn add_extra(&mut self, props: &MultiSelect, value: &Value) -> bool {
> +        let unknown: Vec<AttrValue> = value
> +            .as_array()
> +            .into_iter()
> +            .flatten()
> +            .filter_map(|item| item.as_str())
> +            .filter(|item| {
> +                !props.items.iter().any(|known| known == item)
> +                    && !self.extra.iter().any(|known| known == item)
> +            })
> +            .map(|item| AttrValue::from(item.to_string()))
> +            .collect();
> +
> +        if unknown.is_empty() {
> +            return false;
> +        }
> +        self.extra.extend(unknown);
> +        self.store.set_data(self.chain_extra(props));
> +        true
> +    }
> +}
> +
> +fn selected_keys(value: &Value) -> HashSet<Key> {
> +    match value.as_array() {
> +        Some(items) => items
> +            .iter()
> +            .filter_map(|item| item.as_str())
> +            .map(|item| Key::from(item.to_string()))
> +            .collect(),
> +        None => HashSet::new(),
> +    }
> +}
> +
> +impl ManagedField for MultiSelectField {
> +    type Message = ();
> +    type Properties = MultiSelect;
> +    type ValidateClosure = bool;
> +
> +    fn validation_args(props: &Self::Properties) -> Self::ValidateClosure {
> +        props.input_props.required
> +    }
> +
> +    fn validator(required: &Self::ValidateClosure, value: &Value) -> Result<Value, Error> {
> +        let items = match value {
> +            Value::Null => Vec::new(),
> +            Value::Array(items) if items.iter().all(Value::is_string) => items.clone(),
> +            _ => bail!(tr!("got wrong data type.")),
> +        };
> +
> +        if *required && items.is_empty() {
> +            bail!(tr!("Field may not be empty."));
> +        }
> +
> +        Ok(Value::Array(items))
> +    }
> +
> +    fn create(ctx: &ManagedFieldContext<Self>) -> Self {
> +        let props = ctx.props();
> +
> +        let store = Store::with_extract_key(|item: &AttrValue| Key::from(item.as_str()));
> +        store.set_data(props.items.as_ref().clone());
> +
> +        let selection = Selection::new().multiselect(true);
> +        let _selection_observer = selection.add_listener(ctx.link().callback(|_| ()));
> +
> +        let default = Value::Array(
> +            props
> +                .default
> +                .iter()
> +                .map(|item| Value::String(item.to_string()))
> +                .collect(),
> +        );
> +        selection.bulk_select(selected_keys(&default));
> +
> +        let mut this = Self {
> +            state: ManagedFieldState::new(default.clone(), default.clone()),
> +            store,
> +            selection,
> +            columns: Self::columns(props),
> +            extra: Vec::new(),
> +            _selection_observer,
> +        };
> +        this.add_extra(props, &default);
> +        this
> +    }
> +
> +    fn changed(&mut self, ctx: &ManagedFieldContext<Self>, old_props: &Self::Properties) -> bool {
> +        let props = ctx.props();
> +
> +        if props.items != old_props.items {
> +            // keep selected values that are no longer items, so they stay visible and are not
> +            // dropped from the value on the next selection change
> +            let selected = selected_keys(&self.value);
> +            for item in old_props.items.iter() {
> +                if !props.items.contains(item)
> +                    && !self.extra.contains(item)
> +                    && selected.contains(&Key::from(item.as_str()))
> +                {
> +                    self.extra.push(item.clone());
> +                }
> +            }
> +            self.extra.retain(|item| !props.items.contains(item));
> +            self.store.set_data(self.chain_extra(props));
> +        }
> +        // rebuild unconditionally, so items whose label loads asynchronously do
> +        // not keep the label they had when the field was created
> +        self.columns = Self::columns(props);
> +
> +        true
> +    }
> +
> +    fn value_changed(&mut self, ctx: &ManagedFieldContext<Self>) {
> +        let value = self.value.clone();
> +        self.add_extra(ctx.props(), &value);
> +        self.selection.bulk_select(selected_keys(&value));
> +    }
> +
> +    fn update(&mut self, ctx: &ManagedFieldContext<Self>, _msg: Self::Message) -> bool {
> +        let selected = self.selected(ctx.props());
> +
> +        // the selection also changes when a value is loaded,
> +        // so update only what the user changed
> +        let selected_set: HashSet<Key> = selected
> +            .iter()
> +            .map(|item| Key::from(item.to_string()))
> +            .collect();
> +        if selected_set == selected_keys(&self.value) {
> +            return true;
> +        }
> +
> +        let value = selected
> +            .into_iter()
> +            .map(|item| Value::String(item.to_string()))
> +            .collect();
> +
> +        ctx.link().update_value(Value::Array(value));
> +        true
> +    }
> +
> +    fn view(&self, ctx: &ManagedFieldContext<Self>) -> Html {
> +        let props = ctx.props();
> +
> +        let store = self.store.clone();
> +        let selection = self.selection.clone();
> +        let columns = Rc::clone(&self.columns);
> +        let show_filter = props.show_filter;
> +        let filter = props.filter.clone();
> +        let picker = move |_controller: &DropdownController| {
> +            let table = DataTable::new(Rc::clone(&columns), store.clone())
> +                .striped(false)
> +                .borderless(true)
> +                .bordered(false)
> +                .show_header(false)
> +                .multiselect_mode(MultiSelectMode::Simple);
> +
> +            GridPicker::new(table)
> +                .selection(selection.clone())
> +                .show_filter(show_filter)
> +                .filter(filter.clone())
> +                .into()
> +        };
> +
> +        let selected = self.selected(props);
> +
> +        let mut text = Row::new();
> +        for (pos, item) in selected.iter().enumerate() {
> +            if pos > 0 {
> +                text.add_child(html! { {", "} });
> +            }
> +            text.add_child(match &props.render_value {
> +                Some(render_value) => render_value.apply(item),
> +                None => html! { item },
> +            });
> +        }
> +        let text: Html = text.into();
> +
> +        Dropdown::new(picker)
> +            .with_std_props(&props.std_props)
> +            .with_input_props(&props.input_props)
> +            .value(
> +                selected
> +                    .iter()
> +                    .map(|item| item.to_string())
> +                    .collect::<Vec<_>>()
> +                    .join(","),
> +            )
> +            .render_value(move |_: &AttrValue| text.clone())
> +            .valid(self.result.is_ok())
> +            .into()
> +    }
> +}