Describe the bug
When using a native header filter with headerFilter: "list" and multiselect: true, the table does not update immediately after selecting an item.
The selected value is shown in the filter, but the table only filters after the header filter loses focus.
I also tested with:
headerFilterFunc: "in"
headerFilterLiveFilter: true
headerFilterLiveFilterDelay: 100
but the behavior is the same.
Tabulator Info
Which version of Tabulator are you using?
6.4.0
Working Example
https://codepen.io/Eduardo-Giorgio/pen/azmRaGR
To Reproduce
Open the CodePen example.
- Use the MarketName header filter.
- Select one or more values in the native list multiselect.
- Notice the table does not update immediately.
- Click outside the header filter.
- The filter is then applied.
- Expected behavior
- The filter should apply immediately after selecting an item in the native list multiselect header filter, especially when using:
headerFilterFunc: "in"
headerFilterLiveFilter: true
headerFilterLiveFilterDelay: 100
Screenshots
If needed, I can provide screenshots or a short recording showing that the filter only applies after blur.
Desktop (please complete the following information):
OS: Windows 11
Browser: Chrome
Version: latest
Smartphone (please complete the following information):
Not tested
Additional context
This appears to affect the native headerFilter: "list" with multiselect: true.
A normal text header filter updates immediately, but this native list multiselect seems to commit only on blur.
Minimal column config from the repro:
{
title: "MarketName",
field: "marketName",
headerFilter: "list",
headerFilterFunc: "in",
headerFilterLiveFilter: true,
headerFilterLiveFilterDelay: 100,
headerFilterParams: {
valuesLookup: true,
valuesLookupField: "marketName",
multiselect: true,
clearable: true,
sort: "asc",
listOnEmpty: true
}
}
Describe the bug
When using a native header filter with headerFilter: "list" and multiselect: true, the table does not update immediately after selecting an item.
The selected value is shown in the filter, but the table only filters after the header filter loses focus.
I also tested with:
headerFilterFunc: "in"
headerFilterLiveFilter: true
headerFilterLiveFilterDelay: 100
but the behavior is the same.
Tabulator Info
Which version of Tabulator are you using?
6.4.0
Working Example
https://codepen.io/Eduardo-Giorgio/pen/azmRaGR
To Reproduce
Open the CodePen example.
headerFilterFunc: "in"
headerFilterLiveFilter: true
headerFilterLiveFilterDelay: 100
Screenshots
If needed, I can provide screenshots or a short recording showing that the filter only applies after blur.
Desktop (please complete the following information):
OS: Windows 11
Browser: Chrome
Version: latest
Smartphone (please complete the following information):
Not tested
Additional context
This appears to affect the native headerFilter: "list" with multiselect: true.
A normal text header filter updates immediately, but this native list multiselect seems to commit only on blur.
Minimal column config from the repro:
{
title: "MarketName",
field: "marketName",
headerFilter: "list",
headerFilterFunc: "in",
headerFilterLiveFilter: true,
headerFilterLiveFilterDelay: 100,
headerFilterParams: {
valuesLookup: true,
valuesLookupField: "marketName",
multiselect: true,
clearable: true,
sort: "asc",
listOnEmpty: true
}
}