Philistino
commented
11 months ago This function would handle it with more nuance, at least for numerical values.
export function between(value, filter) {
if (filter == null || (filter[0] == null && filter[1] == null)) {
return true
}
// checks if value is null/undefined
if (value == null) {
return false
}
// handle cases if only one filter is set
if (filter[0] == null && filter[1] != null) {
return value <= filter[1]
}
if (filter[0] != null && filter[1] == null) {
return filter[0] <= value
}
if (value.getTime) {
return filter[0].getTime() <= value.getTime() && value.getTime() <= filter[1].getTime()
}
// happy!
return filter[0] <= value && value <= filter[1]
}
github-actions[bot]
Describe the bug
On the advanced filtering example in the DataTable docs. The Activity column is adjusted using a slider. This is a nice UX feature! However, it's behavior is not quite what the user would expect.
When the example is initialized, the filter model for that column is set (to 0-100). Because it is set, the filter icon on the column header is considered an active filter and it is given the class "p-column-filter-menu-button-active" to make it visually distinct from the columns without an active filter. This is a little unexpected because there isn't a user-set filter on the column.
When the user clicks the "clear" button that clears all filters, the filters on the other columns are removed and the filter on the activity column is reset to the default value of 0-100. But, it still appears active, like at the start. This is unexpected behavior: it should instead appear like the other columns, without an active filter. At this point, the slider still works.
When the user clicks the filter icon on the Activity column to open the column's filter submenu and then clicks the clear button in the submenu, the datamodel is actually cleared for that column and the filter icon appears like the icons on the other inactive columns. However, when the user goes back into to the column's filter submenu and tries to adjust the slider to reduce the upper bound, an error occurs and no filter is applied.
I think the reason for the error is when the filter is actually cleared, the value for the filtermodel on that column is set to undefined. When the user first adjusts the slider, there is no defined value for the lower bound of the slider's range in the change events (for instance [undefined, 99]), and this causes an error. No filter is actually applied until the user manually sets the lower limit.
This behavior feels pretty unintuitive and it is not ideal to show that the the filter is activated by defualt, even when it might not actually be filtering values.
This issue came up when I was trying to give the Slider element upper and lower bounds that reflected the min and max value of the data in the column.
One way to fix this would be to set the min value on the slider and then emit that value instead of undefined if no lower value is provided by the user, although that might be a breaking change.
Probably the better way to fix this would be to adjust the filter function to only consider defined filter variables. This gets a little funny because it would warp the definition of "between." For instance if we set the filter to [undefined, 2], is the number 1 between the two values? Probably not because undefined is not a number. But if you think about it from a filtering perspective, undefined means no lower bound, and therefore 1 should be included.
Error message from running on localhost. I am showing this one because it is more verbose than the one given on the docs but an error happens there too.
Reproducer
See the docs for example behavior
PrimeVue version
3.42.0
Vue version
3.x
Language
TypeScript
Build / Runtime
Vue CLI App
Browser(s)
No response
Steps to reproduce the behavior
Expected behavior
The filter to be applied after adjusting the slider