Hi Team,
I'm facing an issue in the OutSystems Data Grid related to filtering.
When a user enters a value in the filter input field and presses Enter very quickly, the entered value is not captured and therefore the filter is not applied.
However, if the user waits briefly after typing and then presses Enter, the filter works as expected.
We suspect this may be due to a timing/event handling issue where the input value is not yet updated when the Enter key event is triggered.
Any suggestions or best practices to ensure the filter value is correctly captured even when users press Enter quickly would be helpful.
Hi Sudharshan,
I reproduced this against the same Wijmo build (5.20252.44) bundled in Data Grid 2.22.0 and found a working fix. Here is what is going on.
The Data Grid does not add any key handler on the filter row. Enter is fully controlled by the bundled Wijmo FlexGridFilter. The input value itself commits correctly on immediate Enter, the problem is one level deeper.
When you type in the filter editor's search box, two things happen in parallel. The text input updates immediately, so the bound value is correct. But Wijmo also asynchronously refreshes the value list (the checklist of distinct column values) to narrow it down to matching items, and once that refresh lands Wijmo auto-checks the matching items and enables the Apply button.
When you press Enter very quickly, that second step has not happened yet. The Apply button is still disabled, no items are checked, and the filter does not apply. The brief pause that "fixes" it for you is just enough time for the value-list refresh and auto-check to land before Enter is pressed. I confirmed this across text, number and ID columns: with no delay, the grid is not filtered; with around half a second of delay, the same input filters correctly.
The cleanest patch I found is to defer the Enter inside the filter editor until the value list has had time to settle, then click Apply programmatically. You can install this once at app startup (OnReady or OnApplicationReady with a JavaScript node, or a global script):
(function () {
document.addEventListener('keydown', function (e) {
if (e.key !== 'Enter') return; var t = e.target; if (!t || !t.matches || !t.matches('input.wj-form-control')) return; var ed = t.closest('.wj-columnfiltereditor'); if (!ed) return; if (t.dataset.__filterFixRunning === '1') return; e.stopImmediatePropagation(); e.preventDefault(); t.dataset.__filterFixRunning = '1'; setTimeout(function () { var btns = ed.querySelectorAll('button.wj-btn'); var apply = null; for (var i = 0; i < btns.length; i++) { var txt = (btns[i].textContent || '').trim(); if (txt === 'Apply') { apply = btns[i]; break; } }
if (apply) apply.click(); delete t.dataset.__filterFixRunning; }, 600); }, true);})();
In my testing against Wijmo 5.20252.44 this filters correctly with immediate Enter for one-match, multiple-match and no-match searches across text and numeric columns, and it does not break the case where the user already waited before pressing Enter (the fix path runs the same Apply click). The 600ms timeout is empirical, on slower machines you may want to bump it to 800ms.
One thing to watch out for: the button text match `'Apply'` is locale-dependent. If your runtime is in another language and Wijmo's button reads `Aplicar`, `Anwenden`, etc, change the comparison string. There is no stable class name on the Apply button, so text-matching is what is available.
Hope this helps.
This worked, Thanks for your inputs @Afonso Metello