I have a lot of filtered columns (see end for one example) that have multiSelect combo boxes.
When you type into the filter it filters the list and you can select your entry.
But when you stop typing and click on the item in the list it does select it, but you are also left with the letters you are typing still there, which you have to then backspace to get rid of.
{
text: 'Status',
field: 'f5',
resizable: true,
sortable: true,
filterType: 'text',
filterable: {
filterField: {
valueField: 'refId',
displayField: 'display',
type: 'combo',
multiSelect: true,
items: [{
refId: '0',
display: ''
}, {
refId: '2427332',
display: 'Assigned'
}, {
refId: '2427337',
display: 'Canceled'
}, {
refId: '2427335',
display: 'Closed'
}, {
refId: '2427333',
display: 'In Process'
}, {
refId: '2427336',
display: 'On Hold'
}, {
refId: '2427331',
display: 'Open'
}, {
refId: '2427338',
display: 'Reopened'
}, {
refId: '2427334',
display: 'Resolved'
}]
}
},
editor: {
type: 'combo',
valueField: 'refId',
displayField: 'display',
items: [{
refId: '0',
display: ''
}, {
refId: '2427332',
display: 'Assigned'
}, {
refId: '2427337',
display: 'Canceled'
}, {
refId: '2427335',
display: 'Closed'
}, {
refId: '2427333',
display: 'In Process'
}, {
refId: '2427336',
display: 'On Hold'
}, {
refId: '2427331',
display: 'Open'
}, {
refId: '2427338',
display: 'Reopened'
}, {
refId: '2427334',
display: 'Resolved'
}]
},
renderer: ({
value,
column
}) => column.editor.store.getById(value)?.get('display') ? column.editor
.store.getById(value)?.get('display') : value,
autoHeight: true
},