Hello,
We have come across bug when using the Tree Grid combined with the Grid.feature.Search API.
If you provide a search term that successfully returns data, then the results are correctly highlighted.
If you then provide a search term that does not return any results, the highlighting is removed from the cells as expected.
If you then provide a search term that returns data, the cells do not highlight as expected.
Here is a link to a recording that demonstrates the bug on a simplified version of the Bryntum search demo.
As shown in the video, the first time "ch" is searched for, 2 results are found. The next term, "chz", returns 0 results. Finally, "ch" returns 2 results (as shown by the red badge), but the cell highlighting does not appear.
Here is the code that was used to replicate the issue on the search demo:
import { TreeGrid, DomHelper, DateHelper, ObjectHelper, DataGenerator } from '../../build/grid.module.js?465296';
import shared from '../_shared/shared.module.js?465296';
class App {
constructor() {
const me = this;
me.grid = new TreeGrid({
appendTo : 'container',
features : {
search : true
},
columns : [
{ text : 'Skill', field : 'skill', type : 'tree' },
],
data : [
{
id: 'a1u8H000000QmI2QAK',
expanded: true,
skill: 'Category 1',
children: [
{
id: '1234',
skill: 'Child 1'
}
]
},
{
id: 'a1u8H000000QmIWQA0',
expanded: true,
skill: 'Category 2',
children: [
{
id: '5678',
skill: 'Child 2'
}
]
},
{
id: 'a1u8H000000QmGFQA0',
expanded: false,
skill: 'Category 3'
}
],
tbar : [
{
type : 'text',
ref : 'searchField',
clearable : true,
label : '<i class="b-icon b-icon-search"></i>',
listeners : {
change : 'onSearchFieldChange',
clear : 'onSearchFieldClear',
thisObj : me
}
}
],
listeners : {
search : 'onSearchPerformed',
clearsearch : 'onClearPerformed',
thisObj : me
},
tree: true
});
me.search = me.grid.widgetMap.searchField;
}
onSearchPerformed({ find, found }) {
const
me = this,
search = me.search;
// Needed when you search by calling search method manually.
// Suspend events so as not to cause feedback and do the search twice.
if (!ObjectHelper.isEqual(search.value, find)) {
search.suspendEvents();
search.value = find instanceof Date ? DateHelper.format(find, 'L') : find;
search.resumeEvents();
}
search.badge = found.length;
DomHelper.focusWithoutScrolling(me.grid.element);
me.previousBtn.enable();
me.nextBtn.enable();
}
onClearPerformed() {
const me = this;
// need when you reset search by calling clear method manually
me.search.value = '';
me.search.badge = null;
me.previousBtn.disable();
me.nextBtn.disable();
}
onSearchFieldClear() {
this.grid.features.search.clear();
}
onSearchFieldChange({ value }) {
this.grid.features.search.search(value);
}
}
const app = window.app = new App();
setTimeout(() => app.grid.features.search.search('cat'), 10);