ag-grid-enterprise
ag-grid-enterprise copied to clipboard
agSetColumnFilter still firing keypress and/or keydown events on a floating filter. Causes a confusing UX, especially with the material theme
I'm submitting a ...
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/ceolter/ag-grid-enterprise/blob/master/CONTRIBUTING.md#question
Current behavior
I discovered this while using the material theme. There is really 2 issues with this that cause a weird user experience.
Setup: floatingFilter on the grid set to true a column with its filter type set to 'agSetColumnFilter' it shows the worst in the material theme, but affects all themes
-
When you click on the floating filter input box in the material theme, it reacts as if it were not just read-only. The blue highlight seems to indicate that the input has focus, and you should be able to type something in it.
-
So, I did type something. No text appears, but an empty filter is applied which clears out all of the checked boxes.
Expected behavior
- The control should not (in the material theme) indicate that it has the focus.
- Typing in the control should do nothing, instead of applying an empty filter.
Minimal reproduction of the problem with instructions
Should be reproduce-able based off the current behavior section.
Additional note: When I use the chrome dev tools and remove the keydown and keypress events from the floating filter input, the problem no longer happens.
What is the motivation / use case for changing the behavior?
We would like to use the material theme with a floating "agSetColumnFilter" filter. However, our users will get confused with how this interaction works today.
Please tell us about your environment:
OS: Windows IDE: Visual Studio Package manager: npm HTTP Server: IIS
- ag-Grid-Enterprise version: 17.1.1
- Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Chrome 66.0.3359.181
- Language: [all | TypeScript X.X | ES6/7 | ES5] JavaScript