ag-grid-enterprise icon indicating copy to clipboard operation
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

Open koakesdigitalfleet opened this issue 6 years ago • 0 comments

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

  1. 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. image

  2. So, I did type something. No text appears, but an empty filter is applied which clears out all of the checked boxes. image

Expected behavior

  1. The control should not (in the material theme) indicate that it has the focus.
  2. 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

koakesdigitalfleet avatar Jun 18 '18 18:06 koakesdigitalfleet