- bryntum header filter - combo.png (22.66 KiB) Viewed 5199 times
The issue occurs in the multi-select dropdown when removing the last selected value. While the UI updates correctly and visually removes the value, the code still retains the selection, causing the filter to remain applied incorrectly.
Steps to Reproduce:
Open the multi-select dropdown.
Select Value 1, then select Value 2 – both values get applied.
Remove Value 1 – this works as expected, and only Value 2 remains selected.
Remove Value 2 – it visually disappears from the UI, but in the backend, it is still retained as selected, meaning the filter does not fully reset.
Expected Behavior:
When the last selected value is removed, it should be cleared from both the UI and the underlying code, ensuring that the filter resets properly.
Place the following code into the project-summary example below.
https://bryntum.com/products/grid/examples/project-summary/
import { AjaxStore, Grid, DateHelper, Tooltip } from '../../build/grid.module.js?483366';
import shared from '../_shared/shared.module.js?483366';
const
statuses = ['Not started', 'In progress', 'Paused', 'Reviewing', 'Completed'],
statusColors = ['gray', 'blue', 'yellow', 'light-blue', 'green'];
var statusesCombo = {
type : 'combo',
multiSelect : true,
cls : '',
clearTextOnSelection: false,
clearTextOnPickerHide: false,
validateFilter: false,
clearable: true,
items: statuses,
chipView : {
cls : 'b-status-chip'
},
};
const grid = new Grid({
appendTo : 'container',
features : {
cellEdit : true,
filter: {
pickerConfig: {
// remove 'Add Filter' button
showAddFilterButton : false,
// Remove the trash icon
canDeleteFilter : () => false,
listeners : {
beforeAddFilter : ({ filter }) => {
// Change to an allowed default operator
// Match records where a value is included in a given set of values
filter.operator = 'isIncludedIn';
}
},
getFieldFilterPickerConfig : (filter) => {
var comboWidget = statusesCombo;
return {
getValueFieldConfig : (filter, fieldConfig) => {
return {
...fieldConfig,
...comboWidget
};
}
};
}
}
},
},
rowHeight : 55,
columnLines : false,
columns : [
{
text : 'Status',
field : 'status',
ref : 'statusFilter',
width : 200,
renderer({ value, row }) {
const clsAction = value === 'Completed' ? 'addCls' : 'removeCls';
row[clsAction]('b-completed');
return {
class : 'badge',
style : {
backgroundColor : `var(--${statusColors[statuses.indexOf(value)]})`
},
text : value
};
},
editor : {
type : 'combo',
editable : false,
items : statuses
}
},
],
store : {
readUrl : 'data/projects.json',
autoLoad : true
}
});
