headerFilter min/max shows all rows if focused

[paulcsf]

On the example page (and my code), the filterHeader with min/max shows all rows if the input is focused.

http://tabulator.info/examples/4.4#filter-header

Click in the min filter, type 50, no change.
Hit enter, the list filters briefly, then un-filters.
Tab to the max filter, the list filters briefly, then un-filters.
Tab to the gender filter, the list filters as expected.

With a few exceptions(?, random?) if one of the min or max filters is focused, the list is un-filtered regardless of the value in the filter box.

Is this expected? If so, is there a way to disable/override the behavior?

[olifolkerd]

Yes, this is because the value of the number editor only changes once the cursor leaves the input element.

This is done because in most cases people only want to filter on exact numbers (ie a person typing in 50 dosn't want to filter on any number containing 5 while they are first typing the number) but with text editors user are usually interested in seeing the filter applied as they are typing.

You can easily make it so that the filter is applied in real time, if you have a look at the JavaScript for the filter, you will see in the keypress function that it triggers the buildValues function when the enter key is pressed (keycode 13) you could take off this restriction then it would filter the values on every keypress.

I hope that helps,

Cheers

Oli :)

[paulcsf]

Thanks for the response. As I understood your thoughts, I could not get it to work as I desired, but I was able to with the following code/changes:

function buildValues(e){
    e.preventDefault();
    e.stopPropagation();
    success({
        start:start.value,
        end:end.value,
    });
}

end = start.cloneNode();
end.setAttribute("placeholder", "Max");

start.addEventListener("change", buildValues);
start.addEventListener("blur", buildValues);
start.addEventListener("keyup", buildValues);

end.addEventListener("change", buildValues);
end.addEventListener("blur", buildValues);
end.addEventListener("keyup", buildValues);

[darkbdlz]

@paulcsf I tried your solution but after hitting the enter key the table did not filter. Does your fix solve the issue of the table filtering then unfaltering even if both the min and max have a value?

[JaumeAG]

The same thing happens to me but in version 5.2.

Any solution to filter as we add number or when we press enter?.
So far I press enter the data is filtered but when I release enter the data goes back to the initial state.

[olifolkerd]

@JaumeAG That will be down to the event bindings in your editor, you have total control on how your custom editor functions, if you want it to behave differently simply add/remove the event bindings as needed that then call the success or cancel functions