* [PATCH proxmox-yew-widget-toolkit 2/5] widget: data table: only extend explicit select all to new rows
2026-10-28 15:15 [PATCH proxmox-yew-widget-toolkit 0/5] add multi-select component Nicolas Frey
2026-10-28 15:15 ` [PATCH proxmox-yew-widget-toolkit 1/5] widget: data table: simplify lookup of keys near the cursor Nicolas Frey
@ 2026-10-28 15:15 ` Nicolas Frey
2026-10-28 15:15 ` [PATCH proxmox-yew-widget-toolkit 3/5] widget: grid picker: keep selected records hidden by the filter Nicolas Frey
` (2 subsequent siblings)
4 siblings, 0 replies; 6+ messages in thread
From: Nicolas Frey @ 2026-10-28 15:15 UTC (permalink / raw)
To: yew-devel
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
^ permalink raw reply related [flat|nested] 6+ messages in thread* [PATCH proxmox-yew-widget-toolkit 3/5] widget: grid picker: keep selected records hidden by the filter
2026-10-28 15:15 [PATCH proxmox-yew-widget-toolkit 0/5] add multi-select component Nicolas Frey
2026-10-28 15:15 ` [PATCH proxmox-yew-widget-toolkit 1/5] widget: data table: simplify lookup of keys near the cursor Nicolas Frey
2026-10-28 15:15 ` [PATCH proxmox-yew-widget-toolkit 2/5] widget: data table: only extend explicit select all to new rows Nicolas Frey
@ 2026-10-28 15:15 ` Nicolas Frey
2026-10-28 15:15 ` [PATCH proxmox-yew-widget-toolkit 4/5] widget: form: implement multi select field Nicolas Frey
2026-10-28 15:15 ` [PATCH proxmox-yew-widget-toolkit 5/5] widget: form: combobox: update doc to point to `MultiSelect` Nicolas Frey
4 siblings, 0 replies; 6+ messages in thread
From: Nicolas Frey @ 2026-10-28 15:15 UTC (permalink / raw)
To: yew-devel
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
^ permalink raw reply related [flat|nested] 6+ messages in thread* [PATCH proxmox-yew-widget-toolkit 4/5] widget: form: implement multi select field
2026-10-28 15:15 [PATCH proxmox-yew-widget-toolkit 0/5] add multi-select component Nicolas Frey
` (2 preceding siblings ...)
2026-10-28 15:15 ` [PATCH proxmox-yew-widget-toolkit 3/5] widget: grid picker: keep selected records hidden by the filter Nicolas Frey
@ 2026-10-28 15:15 ` Nicolas Frey
2026-10-28 15:15 ` [PATCH proxmox-yew-widget-toolkit 5/5] widget: form: combobox: update doc to point to `MultiSelect` Nicolas Frey
4 siblings, 0 replies; 6+ messages in thread
From: Nicolas Frey @ 2026-10-28 15:15 UTC (permalink / raw)
To: yew-devel
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
^ permalink raw reply related [flat|nested] 6+ messages in thread